27 lines
582 B
TypeScript

'use client';
import { useState } from 'react';
interface SafeImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
fallbackSrc?: string;
}
export default function SafeImage({ src, alt, fallbackSrc, ...props }: SafeImageProps) {
const [imgSrc, setImgSrc] = useState(src);
const handleError = () => {
if (imgSrc !== fallbackSrc && fallbackSrc) {
setImgSrc(fallbackSrc);
}
};
return (
<img
src={imgSrc}
alt={alt}
onError={handleError}
{...props}
/>
);
}