JSFiddle - React, Tailwind, and code Playground

HTML

<img id="myImage" />

iVBORw0KGgoAAAANSUhEUgAAAIgAAAAXCAYAAADQigfEAAAABHNCSVQICAgIfA

CSS

body { background: grey;  }
#myImage { padding: 1em; background: #4072b4;}

JavaScript

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://fiddle.jshell.net/img/logo.png', true);
// = ../img/logo.png

xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  if (this.status == 200) {
      console.log("2> "+ xhr.response);
    //  console.log("2b> "+ xhr.responseText);

    var uInt8Array = new Uint8Array(this.response);
    var i = uInt8Array.length;
    var biStr = new Array(i);
    while (i--)
    { biStr[i] = String.fromCharCode(uInt8Array[i]);
    }
    var data = biStr.join('');
    var base64 = window.btoa(data);
      
    console.log("3> "+ base64);
      
 $("#myImage").attr("src", "data:image/png;base64,"+base64);
  }
};

xhr.send();