35 lines
761 B
TypeScript
35 lines
761 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
type PlaceholderProps = {
|
|
src: string;
|
|
fallbackSrc?: string;
|
|
alt?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function Placeholder({ src, fallbackSrc, alt = "", className }: PlaceholderProps) {
|
|
const [current, setCurrent] = useState(src);
|
|
const failed = useRef(false);
|
|
|
|
useEffect(() => {
|
|
failed.current = false;
|
|
setCurrent(src);
|
|
}, [src]);
|
|
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={current}
|
|
alt={alt}
|
|
className={className}
|
|
onError={() => {
|
|
if (failed.current || !fallbackSrc || fallbackSrc === current) return;
|
|
failed.current = true;
|
|
setCurrent(fallbackSrc);
|
|
}}
|
|
/>
|
|
);
|
|
}
|