JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgSource" id="img1">
89504E470D0A1A0A0000000D494844520000000A0000000A08060000008D    32CFBD0000000467414D410000B18F0BFC6105000000097048597300000B
1300000B1301009A9C180000000774494D4507D606011739281D1757E200
00001D74455874436F6D6D656E7400437265617465642077697468205468    652047494D50EF64256E0000005D4944415418D3BDCCBD0D825000C4F11F    74B4ECE0164CE0320EE02ECEC1083626843D2C4D5EC5D958BC105E67B8EA    721F7FFEAD6E1F84CBCF0E1DEBE12B5CC31C5EE1D6C4877728E1139E75D7
57A309A5CAB630B688F7B084477374BEBE0C921A177B4AD98A0000000049
454E44AE426082
</div>
<img data-source="img1"/>

CSS

.imgSource {
    display:none;
}

JavaScript

var imgs = {};

var srcs = document.getElementsByClassName("imgSource");
  for(var i=0;i<srcs.length;i++){
    var s = srcs[i];
    var hex = s.innerHTML.replace(/[^a-zA-Z0-9]/gm,'');
    var a = new Uint8Array(hex.length/2);
    for(var j=0;j<hex.length/2;j++){
      a[j] = parseInt(hex.substr(j*2,2),16);
    }
    var blob = new Blob([a],{type: 'image/png'});
    imgs[s.id] = URL.createObjectURL(blob);
  }
  var iime = document.querySelectorAll("[data-source]");
  for(var i=0;i<iime.length;i++){
    var e = iime[i];
    e.src = imgs[e.getAttribute("data-source")];
  }