JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<img src="https://cdn3.iconfinder.com/data/icons/humano2/128x128/mimetypes/application-javascript.png" class="original-image"/>
<img alt="loading image" class="image-blob"/>

JavaScript

const img = document.querySelector('.original-image')
const req = new Request(img.getAttribute('src'))

fetch(req).then(async (response) => {
  const blob = await response.blob()
  const base64 = URL.createObjectURL(blob)

  document.querySelector('.image-blob').setAttribute('src', base64)
})