47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
|
import { ImageOff } from "lucide-react";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
type BubbleImageProps = {
|
||
|
|
src: string | undefined;
|
||
|
|
className?: string;
|
||
|
|
loading?: "lazy" | "eager";
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Thumbnail <img> for message bubbles. Renders with an empty alt (decorative)
|
||
|
|
* and, if the asset fails to load, falls back to a neutral placeholder instead
|
||
|
|
* of the browser's broken-image box — which would otherwise expose the raw
|
||
|
|
* file name via alt text.
|
||
|
|
*/
|
||
|
|
export function BubbleImage({ src, className, loading }: BubbleImageProps) {
|
||
|
|
const [failed, setFailed] = useState(false);
|
||
|
|
|
||
|
|
// Reset when the source changes so a reused element re-attempts the new src.
|
||
|
|
useEffect(() => {
|
||
|
|
setFailed(false);
|
||
|
|
}, [src]);
|
||
|
|
|
||
|
|
if (!src || failed) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`flex items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900 ${
|
||
|
|
className ?? ""
|
||
|
|
}`}
|
||
|
|
aria-hidden
|
||
|
|
>
|
||
|
|
<ImageOff className="h-8 w-8 text-neutral-600" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
src={src}
|
||
|
|
alt=""
|
||
|
|
loading={loading}
|
||
|
|
className={className}
|
||
|
|
onError={() => setFailed(true)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|