title: Angular: Display image from blob
body: <p>having trouble getting my image to show.. Any idea what i am doing wrong?</p>
  
  <pre><code> &lt;img style="width:175px" [src]="imageToShow"&gt;
  
  
  getImage(){
    this.mccProgramService.getImageFromService().subscribe(
      (res) =&gt; {
        console.log(res);
        this.imageToShow = res;
      //  window.open(fileURL);
      }
    );
  }
  
  getImageFromService() {
          return this._httpClient.get("http://localhost:9080/mccr/api/file/download.action?contentFileId=11", {observe: 'response', responseType: 'blob'})
            .map((res) =&gt; {
              return new Blob([res.body], {type: res.headers.get('Content-Type')});
            })
        }
  </code></pre>
  
  <p>Data is coming back as this from service</p>
  
  <pre><code>&lt;&lt;other headers&gt;&gt;
  &lt;&lt;Content-Type header&gt;&gt;
  &lt;&lt;other headers&gt;&gt;
  &lt;&lt;file binary data&gt;&gt;
  </code></pre>