CODEWITHSUNDEEP
javascripthtml
EuGorDD
EuGorDD

Reputation: 11

Display raw image data from response

I have API url, that send me in response an image. When i try to console.log my response i see something like that:

Response with image in console

Please tell me what is the best way to display that raw-data in my page? What format of raw-data is it? I can not even google it, because I really don`t know what format is it. 

const img = document.createElement('img');
document.body.appendChild(img);

const src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png';

fetch(src)
  .then(resp => resp.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(uri => (img.src = uri));
<!-- Polyfill for older browsers -->
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>

Upvotes: 0

Views: 6950

Answers (1)

Matthew Schlachter
Matthew Schlachter

Reputation: 3350

I would recommend looking at this question.

The basic premise would be to base64 encode using btoa and then add it to the page, like so:

var img = document.createElement('img');
img.src = 'data:image/png;base64,' + btoa('your-binary-data');
document.body.appendChild(img);

Upvotes: 1

Related Questions