34 lines
628 B
TypeScript
34 lines
628 B
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
interface ImageWithFallbackProps {
|
|
src: string;
|
|
alt?: string;
|
|
defaultSrc?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const ImageBetter = ({
|
|
src,
|
|
alt,
|
|
defaultSrc = "/default-image.png",
|
|
className,
|
|
}: ImageWithFallbackProps) => {
|
|
const [imageSrc, setImageSrc] = useState(src);
|
|
|
|
// Menangani perubahan `src` agar selalu diperbarui ke `imageSrc`
|
|
useEffect(() => {
|
|
setImageSrc(src);
|
|
}, [src]);
|
|
|
|
return (
|
|
<img
|
|
src={imageSrc}
|
|
alt={alt}
|
|
className={className}
|
|
onError={() => setImageSrc(defaultSrc)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ImageBetter;
|