Fallback imageSrc onError

[KarshKodes2]

Hi @AdamRisberg, I am trying to pass the onError prop to handle broken image links.

I think it is advisable to pass the image onError prop to handle image links that may be broken.

This removes the broken image icon and sets image src to the new one if broken.

{...props} can be passed to the IMG component or declare the onError prop explicitly to handle broken image links

Example:

Test 1: Invalid Image URL without error handling

<img
      src="https://solabstore.nyc3.digitaloceanspaces.com/shobbu/products/1592567372859-product_image-image1"
      alt="Golden boot"
 />

<img src="https://solabstore.nyc3.digitaloceanspaces.com/shobbu/products/1592567372859-product_image-image1" alt="Shoe slide1" />

Test 2: Invalid Image URL with error handling

//Fallback error handler function
const defaultSrc = (ev) =>
 {
ev.target.src = "http://sc01.alicdn.com/kf/H658894263a8a40539302e9b6d1069ff6p/240382028/H658894263a8a40539302e9b6d1069ff6p.jpg";
};

// html code
<img
      src="https://solabstore.nyc3.digitaloceanspaces.com/shobbu/products/1592567372859-product_image-image1"
      alt="Golden boot"
      onError={defaultSrc}
 />

<img src="http://sc01.alicdn.com/kf/H658894263a8a40539302e9b6d1069ff6p/240382028/H658894263a8a40539302e9b6d1069ff6p.jpg" alt="Shoe slide1" onError={defaultSrc} width="250px" height="250px" />

[nikitaNaredi]

Hi @AdamRisberg ,

I also came across same issue while using Magnifiers. I think it will be great if it supports this prop.

Thanks

[EliasTouil]

I'm not sure what I'm about to say corresponds to your problem, but I just read that you can use an array of strings as props instead of juste the string, and it will use the subsequent strings as fallback"