Today I'm going to talk about how to handle image-loading error with ReactJS and TypeScript
The motivation to write this is When I work on the NextJS application in my office, our UI designer provides me with two image types, for default loading a webp
file and for fallback jpeg
file, This is the first time I'm adding a fallback image to a img
tag :( my bad
So I search for how to do this using React and Typescript,
I found this answer in StackOverflow
<img
src={record.picture}
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src = "image_path_here";
}}
/>
Then I tried to make this more TS-compatible version
And this is it
...
const onErrorImage = ({ currentTarget }: SyntheticEvent<HTMLImageElement, Event>): void => {
currentTarget.onerror = null;
currentTarget.src = imageFallbackURL;
};
...
return (
<>
...
<img
alt="your alt here"
onError={onErrorImage}
src={imageDefaultURL}
/>
...
</>
);
But we have picture
tag now so We can improve this as following
<picture>
<source srcSet={avifSrc} type={"image/avif"} />
<source srcSet={webpSrc} type={"image/webp"} />
<img
alt={alt}
height={height}
loading={loading}
src={fallback}
width={width}
/>
</picture>