How to preview an image using Javascript

main Image

We can use the blob object in JavaScript to preview an image. It is useful in scenarios when you want your user to preview the image post before uploading it to the server.

We explain with an example for image preview when the file is uploaded with input. So, In the html, paste the below code:

<input type="file"
       accept="image/png, image/jpeg" />

<img id="avatar" src="" alt="avatar" />

When the file is uploaded imagePreview function is called in the javascript. That’s what we implement next.

In the javascript, we can define the imagePreview function as below that updates the src of the image in the HTML.

const avatar = document.getElementById("avatar")

function imagePreview(e) {
  const blob = new Blob([e.files[0]], { type: "image/jpeg" })
  const blobURL = URL.createObjectURL(blob) = "block"
  avatar.src = blobURL

To add little styling to the img element, we can paste the below code:

#avatar {
  width: 250px;
  border-radius: 5px;

The image blob URL is temporarily stored in the memory. When you refresh the page, the blob image URL is lost.

Thanks for reading the post.

If you want to learn how to build a full-stack subscription website, please check out my course.

If you find this post useful, please share it on your social platform to reach out to more people.

Share this Blog