JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Reading, storing, and loading image...</h1>

CSS

body {
    background: black;
    color: white;
}

JavaScript

function onError(e) {
  console.log('Error', e);
}

function fetchImage() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/img/logo.png', true);
    xhr.responseType = 'arraybuffer';
    
    xhr.onload = function(e) {        
      saveImage(xhr.response);
    };
    
    xhr.send();
}

function saveImage(response) {
    window.webkitRequestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
        fs.root.getFile('image.png', {create: true}, function(fileEntry) {
          fileEntry.createWriter(function(writer) {
            var bb = new WebKitBlobBuilder();
            bb.append(response);
            writer.write(bb.getBlob('image/png'));
            readImage(fs);        
          }, onError);
        }, onError);
    }, onError);  
}

function readImage(fs) {
  fs.root.getFile('image.png', {}, function(fileEntry) {

    fileEntry.file(function(file) {
       var reader = new FileReader();

       reader.onloadend = function(e) {
         var img = document.createElement('img');
         img.src = this.result;
         document.body.appendChild(img);
       };

       reader.readAsDataURL(file);
    }, onError);

  }, onError);
}
                           
fetchImage();