JSFiddle - React, Tailwind, and code Playground

HTML

<div class="printing-not-ready">
Images are still loading please cancel your preview and try again shortly.
</div>
<div class="do-not-print">
  <h1>
  My super awesome page!
  </h1>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<p>
Birds and sunsets sure are pretty!
</p>
</div>

CSS

.printing-not-ready{
  display:none;
}
@media print{
  .printing-not-ready{
    display:block;
  }
  .do-not-print{
    display:none;
  }
}

JavaScript

img = document.querySelector('img');
var isPrinting = window.matchMedia('print');
isPrinting.addListener((media) => {
  if (media.matches) {
    //img.src = 'http://unsplash.it/500/300/?image=705';
    var xhr = new XMLHttpRequest();
    //xhr.responseType="blob";
    xhr.open("GET","http://unsplash.it/500/300/?image=705",false);
    xhr.send();
     var arr = new Uint8Array(this.response);
    // Convert the int array to a binary string
    // We have to use apply() as we are converting an *array*
    // and String.fromCharCode() takes one or more single values, not
    // an array.
    var raw = String.fromCharCode.apply(null,arr);
    //btoa is supported in modern browsers
    var b64=btoa(raw);
    var dataURL="data:image/jpeg;base64,"+b64;
    img.src = dataURL;
    document.querySelector(".printing-not-ready").remove();
    document.querySelector(".do-not-print").className=""
  }
})