JSFiddle - React, Tailwind, and code Playground

by Victor Osório

HTML

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<img id="raw-content-axio" style="width: 50%; background-color: gray; float: left" />

<img id="raw-content" style="width: 50%; background-color: gray; float: left" />

JavaScript

(function() {
  axios.get('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg', {
      responseType: 'arraybuffer'
    })
    .then(function(response) {
      document.getElementById("raw-content-axio").setAttribute('src', 'data:image/jpeg;base64,' + arrayBufferToBase64(response.data));
    })
    .catch(function(error) {
      console.log(error);
    });

  var xhttp = new XMLHttpRequest();
  xhttp.responseType = "arraybuffer";
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this);
      document.getElementById("raw-content").setAttribute('src', 'data:image/jpeg;base64,' + arrayBufferToBase64(this.response));
    }
  };
  xhttp.open("GET", "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg", true);
  xhttp.send();
})();

function arrayBufferToBase64(buffer) {
  var binary = '';
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}