react-lazy-load-image-component icon indicating copy to clipboard operation
react-lazy-load-image-component copied to clipboard

add Error image prop

Open EliasTouil opened this issue 5 years ago • 4 comments

Is your feature request related to a problem? Please describe. I would like the component to display a local asset if my CDN was to fail

Describe the solution you'd like Use a errorImage prop which is a URL to a local asset to display (instead of the native browser broken image graphic)

Describe alternatives you've considered Expose the dom node so that we can set event handlers on it (I thought it was possible but I can't find it, please show me how if I missed that) Expose the dom node's error and handlers

EliasTouil avatar Apr 28 '20 02:04 EliasTouil

Hi @EliasTouil , you can write this:

function MyImageComponent({image}){
   const [error, setError] = useState(false);
   const picture = new Image();
   picture.src = image;
   picture.onerror = () => setError(true);
   return error ? <ErrorComponent />  
   : <LazyLoadImage src={image}/>
  }

If you wrap this component by a div with a fixed height, your error component, which can be a svg or even directly an image, will be at the correct dimensions.

DoneDeal0 avatar May 06 '20 14:05 DoneDeal0

@DoneDeal0 Thank you for your answer

Am I mistaken or does that load the image twice?

EliasTouil avatar May 06 '20 21:05 EliasTouil

Yes, it will load the image twice, however, it will only be rendered once in the dom, so don't worry, it's not a performance killer.

DoneDeal0 avatar May 07 '20 13:05 DoneDeal0

Since this is a lazy load component, wouldn't you agree it goes against its purpose?

EliasTouil avatar May 12 '20 16:05 EliasTouil