Feature request: Retain the default image if the data-src fails to load (404)

[jeffkreska]

I only want the data-src image to replace the src image if the data-src image is successfully loaded. If the data-src image returns a 404,503 etc error, then don't change the src attribute.

[ddouble]

+1

[aFarkas]

You can easily do this with a plugin.

[jeffkreska]

Can you provide an example of the plugin you are talking about.

[aFarkas]

You can see the JS API documentation. Here is an untested example, that should work for your needs:

document.addEventListener('lazybeforeunveil', function(e){
  var img = e.target;
  var src = img.getAttribute('data-src');
  var newImage = document.createElement('img');

  e.preventDefault();

  img.classList.add('lazyloading');
  img.classList.remove('lazyload');

  newImage.onload = function(){
    img.src = src;
    img.classList.add('lazyloaded');
  };

  newImage.onerror = function(){
    img.classList.add('lazyloaded');
  };

  newImage.src = src;
});

[bruncanepa]

This should work:

<img
  {...props}
  onError={e => {
    e.target.src = 'defaultImage.png';
  }}
>