yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { PLACEHOLDER_IMAGE } from "@hey/data/constants";
2import type {
3 DetailedHTMLProps,
4 ImgHTMLAttributes,
5 Ref,
6 SyntheticEvent
7} from "react";
8import { forwardRef, memo, useCallback, useEffect, useState } from "react";
9
10const Image = forwardRef(
11 (
12 {
13 onError,
14 ...props
15 }: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
16 ref: Ref<HTMLImageElement>
17 ) => {
18 const [imageLoadFailed, setImageLoadFailed] = useState(false);
19
20 const handleError = useCallback(
21 (event: SyntheticEvent<HTMLImageElement, Event>) => {
22 if (imageLoadFailed) {
23 return;
24 }
25 setImageLoadFailed(true);
26 if (onError) {
27 onError(event);
28 }
29 },
30 [imageLoadFailed, setImageLoadFailed, onError]
31 );
32
33 useEffect(() => {
34 setImageLoadFailed(false);
35 }, [props.src]);
36
37 return (
38 <img
39 {...props}
40 alt={props.alt || ""}
41 onError={handleError}
42 ref={ref}
43 src={imageLoadFailed ? PLACEHOLDER_IMAGE : props.src}
44 />
45 );
46 }
47);
48
49export default memo(Image);