Рендеринг изображений — лучший способ

Что я делал

Отобразите изображение с элементом img, и если src имеет значение null или не определено, отобразите резервное изображение.

import { FC } from "react";

type ImageProps = {
  src: string;
  alt: string;
};

const Image: FC<ImageProps> = ({src, alt}) => {
  return <img alt={alt} src={src || "fallback.jpg"}/>; 
}

Что происходит, когда изображение не работает

Всякий раз, когда изображение не загружается, запускается событие onError, мы можем использовать это событие для обновления src до резервного изображения.

Обновления для исправления

Вместо того, чтобы напрямую добавлять необязательное условие резервного изображения, мы можем добавить обработчик события onError, чтобы сделать то же самое.

Хук useImage

import { SyntheticEvent, useEffect, useState } from "react";
import { ImageProps } from "./Image";

type ImagePropsGetter = () => ImageProps & {
  onError: (e: SyntheticEvent<HTMLImageElement>) => void;
};

const useImage = ({
  src: srcFromProps,
  alt
}: ImageProps): { getImageProps: ImagePropsGetter } => {
  const [src, setSrc] = useState(srcFromProps);

  const onError = () => {
    setSrc("fallback.jpg");
  };

  useEffect(() => {
    setSrc(srcFromProps);
  }, [srcFromProps]);

  const getImageProps: ImagePropsGetter = () => {
    return { src, alt, onError };
  };

  return { getImageProps };
};

export default useImage;

import { FC } from "react";
import useImage from "./useImage";

export type ImageProps = {
  src: string;
  alt: string;
};

const Image: FC<ImageProps> = (props) => {
  const { getImageProps } = useImage(props);

  return <img {...getImageProps()} />;
};

export default Image;

Внешние ссылки

• Каковы другие причины, по которым изображение может не загрузиться?
• Почему я обрабатывал состояние в хуке, а не в компоненте Image?