background
- Browser’s native image not loaded status doesn’t look good, I’d like not to use it.
- I am using react.
ideas
- Determine if the image is loaded successfully by
onLoadedevent. - If loaded successfully show the HTMLImageElement, if not show the custom error component while HTMLImageElement is hidden (
visibility: hidden).
how it looks like
fail
fail with alt on it
success
tips
-
When load failed, the HTMLImageElement can’t be set to
display: none, the HTMLImageElement needs to be in the document tree. Also the HTMLImageElement should to be invisible and looks like not placed in the web page, so use the grid display to implement this. -
every time the image is changed, will reload again, so need to set loaded status to false first.
reference
import { cn } from "@/lib/utils";
import { Image } from "lucide-react";
import { useEffect, useState } from "react";
interface ImageProps {
src: string;
iconSize?: number;
className?: string;
alt?: string;
showAlt?: boolean;
}
const BeautyImage = ({
src,
iconSize = 16,
className = "",
alt = "",
showAlt = false,
}: ImageProps) => {
// load successfully or not
const [imageLoaded, setImageLoaded] = useState(false);
/**
* onLoad event
*/
const onImageLoad = () => {
setImageLoaded(true);
};
/**
* everytime the src changes, set load status to fail
*/
useEffect(() => {
setImageLoaded(false);
}, [src]);
return (
{/* custom error component */}
{!imageLoaded && (
{alt}
}
)}
);
};
