JSFiddle - React, Tailwind, and code Playground

HTML

<span class="ImageHolder">
    Loaded From Array ObjectUrl<br/>
    <img/>
</span>

<span class="ImageHolder">
    Converted To DatUrl<br/> 
    <img/>
</span>

<span class="ImageHolder">
    Converted from Base64 to ArrayObjectUrl<br/>
    <img/>
</span>

CSS

.ImageHolder {
    background-color: #0aa;
    padding: 30px 20px 20px 20px;
    margin-top: 40px;
    display: inline-block;
}
#myImg {
    padding-top: 20px;
}

JavaScript

function ajaxImage(url, imgs) {
    var xhr = new XMLHttpRequest(),
        blob, objectURL, arrayBufferView;

    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.addEventListener('load', function () {
        if (xhr.status === 200) {
            var arrayBufferView = new Uint8Array(xhr.response);

            var blob = new Blob([arrayBufferView], {
                'type': 'image/jpeg'
            });
            var objectURL = window.URL.createObjectURL(blob);

            imgs[0].src = objectURL;

            var base64Data = btoa(String.fromCharCode.apply(null, arrayBufferView));
            imgs[1].src = 'data:image/png;base64,' + base64Data;

            var raw = window.atob(base64Data);
            var rawLength = raw.length;
            var array = new Uint8Array(new ArrayBuffer(rawLength));

            for (i = 0; i < rawLength; i++) {
                array[i] = raw.charCodeAt(i);
            }

            var blob2 = new Blob([array], {
                'type': 'image/jpeg'
            });
            var objectURL2 = window.URL.createObjectURL(blob2);

            imgs[2].src = objectURL2;

        }
    }, false);
    xhr.send();
}

window.addEventListener('load', function () {
    ajaxImage('/img/logo.png', document.querySelectorAll('img'));
}, false);