react-lazy-load-image-component
react-lazy-load-image-component copied to clipboard
add Error image prop
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
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 Thank you for your answer
Am I mistaken or does that load the image twice?
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.
Since this is a lazy load component, wouldn't you agree it goes against its purpose?