Angular 5 - How to display image in HTML that come

问题:

I need to display an thumbnail/image that comes from a POST request

Postman shows the output in right way

I'm trying to use the same in Angular component but does not display. Console show text/binary.

html

<img src="{{turl}}" />

Component.ts

 turl : any

getThumbnail() : void {
this.azureblobService.getBlobThumbnail()
  .subscribe(
    (val) => {
      console.log("POST call - getThumbnail- successful value returned in body",
        val);
      this.turl = val; //<====== Set value here
    },
    response => {
      console.log("POST call - getThumbnail - in error", response);
    },
    () => {
      console.log("The POST - getThumbnail - observable is now completed.");
    });
 }

Service

getBlobThumbnail() {
console.log("....AzureblobService.getBlobThumbnail()");
const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Accept' : 'application/json',
  'Ocp-Apim-Subscription-Key' : 'xxxxxxx'
});

return this.http.post(this.thumbnailFetchUrl,
  JSON.stringify({
    responseType: "blob",
    "url": "http://xxxx.blob.core.windows.net/acsazurecontainer/Git-Logo-1788C.png",
  }), {headers: headers});
}

Appreciate any help?

回答1:

In order to display the image in the DOM, we need to convert from blob to base64. Here is the code

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

   if (image) {
      reader.readAsDataURL(image);
   }
}

Also, make sure you use DomSanitizer injectable service by applying safeurl to image src.

回答2:

With Suresh Kumar Ariya's help and after a lot of back/forth, found the solution.

Solution was discussed here: https://github.com/angular/angular/issues/18586

The key here is to use responseType: 'blob' as 'json' and not responseType: 'blob'

Service.ts

getBlobThumbnail(): Observable<Blob> {
  console.log("....AzureblobService.getBlobThumbnail()");
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
});

return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
  {
    "url": "http://xxxx/Logo-1788C.png"
  }, {headers: headers, responseType: 'blob' as 'json' });

}

Component.ts

getThumbnail() : void {
 this.azureblobService.getBlobThumbnail()
   .subscribe(
      (val) => {
        console.log("POST - getThumbnail- successful value returned in body", val);
        this.createImageFromBlob(val);
    },
    response => {
      console.log("POST - getThumbnail - in error", response);
    },
    () => {
      console.log("POST - getThumbnail - observable is now completed.");
    });
}
/* Convert */
createImageFromBlob(image: Blob) {
 console.log("Call createImageFromBlob()", image);
 let reader = new FileReader();
 reader.addEventListener("load", () => {
  this.imageBlobUrl = reader.result;
 }, false);

 if (image) {
  reader.readAsDataURL(image);
 }
}

Component.html

<h2>Thumbnail imageBlobUrl</h2>
<img [src]="imageBlobUrl">

Environment: Angular 5.0.0