Render blob image with Angular 4

Question

I\'m trying to render an user image that comes from soap server response, it not should be difficult but i dont know how start to do.

This is the code of the request way

Answer 1

If you have blob value, you can directly set the value in image tag in html..

Instead of this.imgStr = 'data:image/jpeg;base64,' + b64; use this.imgStr = b64;

<img src="data:image/png;base64,{{imgStr}}" />

Answer 2

I'm not an image converting expert, but if it's a binary encoded image, try this :

let img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your binary data here');
// image now contains your picture

But I'm not sure this is correct data ... Anyways, try this, and let me know the result

Answer 3

For dealing with blobs coming from a server try the following

// Get the blob via an angular service - with response type "blob" as "json"
getBlob() {
    return this.http_.get(`${this.url}/getBlob`, {responseType:"blob" as "json"});
  }

//In your component
imageUrl: string;
getBlobUrl(){
    this.blobService.getBlob().subscribe((data: Blob) => {
      this.createImageFromBlob(data);
    })
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      this.imageUrl= reader.result;
    }, false);
  if (image) {
      reader.readAsDataURL(image);
    }
  }

<!--HTML-->
<div>
 <img [src]="imageUrl">
</div>