[Javascript] Create an Image with JavaScript Using Fetch and URL.createObjectURL

Most developers are familiar with using img tags and assigning the src inside of HTML. It is also possible to only use JavaScript to fetch the image from another site, create a local url, and assign that to an img tag that you create. This lesson walks you through the process of fetching an image from a placeholder site and displaying it using only JavaScript.

 

;(async function() {
  const response = await fetch(`https://placekitten.com/320/240`)
  const blob = await response.blob()

  const url = URL.createObjectURL(blob)

  const image = new Image()
  image.src = url

  document.getElementById("app").appendChild(image)
})()