title: Angular 5 - How to display image in HTML that comes as output from a http POST?
body: <p>I need to display an thumbnail/image that comes from a POST request</p>
  
  <p><strong>Postman shows the output in right way</strong></p>
  
  <p><a href="https://i.stack.imgur.com/FihcD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FihcD.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to use the same in Angular component but does not display. Console show text/binary.</p>
  
  <p><a href="https://i.stack.imgur.com/fdRfr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fdRfr.png" alt="enter image description here"></a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;img src="{{turl}}" /&gt;
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code> turl : any
  
  getThumbnail() : void {
  this.azureblobService.getBlobThumbnail()
    .subscribe(
      (val) =&gt; {
        console.log("POST call - getThumbnail- successful value returned in body",
          val);
        this.turl = val; //&lt;====== Set value here
      },
      response =&gt; {
        console.log("POST call - getThumbnail - in error", response);
      },
      () =&gt; {
        console.log("The POST - getThumbnail - observable is now completed.");
      });
   }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>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});
  }
  </code></pre>
  
  <p>Appreciate any help?</p>