How I display as image a blob object with JS

Question

My function returns a blob object when I log it in my console:

Blob(623853) {name: "profile.jpg", size: 623853, type: "image/jpeg"}

I want to display this image to the user with JavaScript, how can I do it?

Answer 1

You can use URL.createObjectURL to generate a blob URL and set it as the image source.

const blobUrl = URL.createObjectURL(blob) // blob is the Blob object
image.src = blobUrl // image is the image element from the DOM