title: Getting Image from API in Angular 4/5+?
body: <p>I am new to development using Angular 4. I am facing an issue while getting a response from API about displaying an image. In the API, an image file has an input-stream file. I don't know how to retrieve it and display it properly.</p>
  <p>Can you anyone resolve it?</p>
  <p>I tried this:</p>
  <ul>
  <li><p><strong>Image.Component.ts:</strong></p>
  <pre><code> this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769')
            .subscribe((response) =&gt; { var blob = new Blob([response.text()], {type: &quot;image/png&quot;});
              console.log(blob);
              console.log(window.btoa(blob.toString()));           
   });
  </code></pre>
  </li>
  </ul>
  <p>Results in this =&gt; <code>W29iamVjdCBCbG9iXQ==</code> , but it is not the correct format</p>
  <p>and tried this also:</p>
  <pre><code>this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769').map(Image=&gt;Image.text())
    .subscribe(data =&gt; {
      console.log((data.toString()));   
  });
  </code></pre>
  <p>Which has this result =&gt;</p>
  <pre><code> ����\ExifII*��7                                                      ��DuckyK��fhttp://ns.adobe.com/xap/1.0/&lt;?xpacket begin=&quot;&quot; id=&quot;W5M0MpCehiHzreSzNTczkc9d&quot;?&gt; &lt;x:xmpmeta xmlns:x=&quot;adobe:ns:meta/&quot; x:xmptk=&quot;Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        &quot;&gt; &lt;rdf:RDF xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;&gt; &lt;rdf:Description rdf:about=&quot;&quot; xmlns:xmpMM=&quot;http://ns.adobe.com/xap/1.0/mm/&quot; xmlns:stRef=&quot;http://ns.adobe.com/xap/1.0/sType/ResourceRef#&quot; xmlns:xmp=&quot;http://ns.adobe.com/xap/1.0/&quot; xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; xmpMM:OriginalDocumentID=&quot;xmp.did:0280117407206811A2188F30B3BD015B&quot; xmpMM:DocumentID=&quot;xmp.did:E2C71E85399511E7A5719C5BBD3DDB73&quot; xmpMM:InstanceID=&quot;xmp.iid:E2C71E84399511E7A5719C5BBD3DDB73&quot; xmp:CreatorTool=&quot;Adobe Photoshop CC 2014 (Windows)&quot;&gt; &lt;xmpMM:DerivedFrom stRef:instanceID=&quot;xmp.iid:7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93&quot; stRef:documentID=&quot;adobe:docid:photoshop:40615934-3680-11e7-911d-f07c687d49b8&quot;/&gt; &lt;dc:rights&gt; &lt;rdf:Alt&gt; &lt;rdf:li xml:lang=&quot;x-default&quot;&gt;                                                      &lt;/rdf:li&gt; &lt;/rdf:Alt&gt; &lt;/dc:rights&gt; &lt;dc:creator&gt; &lt;rdf:Seq/&gt; &lt;/dc:creator&gt; &lt;/rdf:Description&gt; &lt;/rdf:RDF&gt; &lt;/x:xmpmeta&gt; &lt;?xpacket end=&quot;r&quot;?&gt;���Photoshop 3.08BIMJZ%Gt6                                                      8BIM%�&lt;&quot;.}��νz��܌��Adobed����  
  </code></pre>
  <p>but I used to encode using window.btoa, it should be error like not latin range.</p>