JSFiddle - React, Tailwind, and code Playground

by cookies

HTML

<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<div>
    Valid image: <img src="http://files.casuals.us/ybp/2012/8-1/Small/IMG_7654.JPG" />
</div>
<div>
    Valid url, but invalid image (.txt file) (this image will be replaced by a placeholder image of a rear-view mirror): <img src="http://files.casuals.us/ybp/2012/8-1/ls.txt" />
</div>
<div>
    Invalid url, 404 Not Found (will be replaced by the placeholder image): <img src="http://files.casuals.us/ybp/2012/8-1/ls.jpg" />
</div>

JavaScript

var imgLoad = imagesLoaded('body');
imgLoad.on( 'always', function() {
  console.log( imgLoad.images.length + ' images loaded' );
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    var image = imgLoad.images[i];
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
    if (result == 'broken')
        image.img.src = 'http://yourbestphotographer.com/2012/near-home.jpg'; /* DOUBLE CHECK THE SRC */
  }
});