JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<img width=200 height=100 style="border:1px solid blue" id="img1"/>

<img width=200 height=100 style="border:1px solid blue" id="img2"/>

JavaScript

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

var imgBin = atob("iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==")

// convert binary to Uint8Array
imgBinArr = Uint8Array.from(imgBin, c => c.charCodeAt(0))
// create blob from binary sequance 
var imgBinBlob = new Blob([imgBinArr], {type:'image/png'})


// using data url, and fetch as helper to create blob
var i1 = document.getElementById("img1")
fetch(url)
.then(res => res.blob())
.then(res => {i1.src =  URL.createObjectURL(res)})


// using binary data 
var i2 = document.getElementById("img2")
i2.src = URL.createObjectURL(imgBinBlob)