Set Image src from image blob

Question

I have trying to request an image from an API and set the src of an img in my web page. The API returns a blob that represents a .png file. At this time, I'm requesting the image using the following:

const fetchResult = await fetch(imageApiUrl);
const resultBlob = await fetchResult.blob();
console.log(resultBlob);

In the console, I can see:

Blob {size: [some number], type: "image/png" }

So, I know that I have a result. I assume a blob. I now need to set this blob as the source of an img in my HTML, which looks like this:

<img id="profilePicture" alt="Profile Picture" height="250" width="250" />

I have this:

var profilePicture = document.getElementById('profilePicture');

How do I set the src of the profilePicture element to the blob?

Does this answer your question? Using JavaScript to display a Blob — Daniel Beck
– Daniel Beck, Commented May 12, 2021 at 16:38

Guerric P · Accepted Answer · 2021-05-12 16:37:48Z

3

You could use URL.createObjectURL in order to create a temporary URL that points to the in-memory image:

let url = URL.createObjectURL(resultBlob);

const img = document.getElementById('profilePicture');
img.src = url;

answered May 12, 2021 at 16:37

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set Image src from image blob

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related