title: display PNG from http get request
body: <p>i'm working with angular 4, I'm using an api that return an image with <strong>content-type : img/png</strong></p>
  
  <p>The http method : </p>
  
  <pre><code>return this.http.get('URL', this.options)
      .map((res: Response) =&gt; res.text());
  // can be also : res.arrayBuffer() // res.blob()
  </code></pre>
  
  <p>The http get response (in text and in ARC ) is like that : </p>
  
  <pre><code>�PNG  IHDR��"͹�W�W��zؽ�|+q%�   ��Y������M缥{��U��H�ݏ)L�L�~�6/'6Q׌�}���:��l'���� �R�L�&amp;�~Lw?�
  </code></pre>
  
  <p>I tried different methods to convert it and display it : </p>
  
  <ul>
  <li><p>getting response as <strong>blob</strong> and convert it using :</p>
  
  <pre><code> new Uint8Array(response)
  </code></pre></li>
  <li><p>Getting the image as <strong>arrayBuffer</strong> and then convert it using : </p>
  
  <pre><code>  arrayBufferToBase64(buffer) {
    let binary = '';
    let bytes = new Uint8Array(buffer);
    let len = bytes.byteLength;
    for (let i = 0; i &lt; len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
   }
  </code></pre></li>
  </ul>
  
  <p>Both of them didnt worked for me and the image is not displaying.</p>
  
  <p>My question so is , what is the real format of the response (blob, arraybuffer or text ) and how to display it ?</p>