title: How to render a png image from raw binary
body: <p>A rest webservice I'm querying prompts the download modal window when I send a request.
  This is the response header</p>
  
  <pre><code>{
    "access-control-allow-credentials": "true",
    "access-control-allow-headers": "x-requested-with, content-type, authorization",
    "access-control-allow-methods": "GET, POST, OPTIONS",
    "access-control-allow-origin": "*",
    "connection": "close",
    "content-disposition": "attachment; filename =AR2.png",
    "content-type": "application/octet-stream",
    "date": "Tue, 28 Apr 2020 17:17:18 GMT",
    "server": "Apache-Coyote/1.1",
    "transfer-encoding": "chunked"
  }
  </code></pre>
  
  <p>so if I try to <code>fetch</code> and print the response body in console I get an unreadable text starting with <code>\89PNG</code>, of course.
  Is there a way to render the PNG in a html page?
  I tried <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="nofollow noreferrer">Blob</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader" rel="nofollow noreferrer">FileReader</a>, but I'm not sure how to use them for this use case.</p>
  
  <p>An attempt I've done</p>
  
  <pre><code>var response = // XHR response
  var blob = new Blob([response]);
  var imageUrl = urlCreator.createObjectURL(blob);
  document.querySelector("#image").src = imageUrl;
  </code></pre>
  
  <p>The html page just shows the icon of a broken src where the image should be.</p>
  
  <p>I tried to print the whole <code>event</code> (<code>xhr.onload</code> callback). <code>responseType</code> seems empty.
  <a href="https://i.stack.imgur.com/2T4Vd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2T4Vd.png" alt="enter image description here"></a></p>