Renderowanie obrazów — lepszy sposób

Co kiedyś robiłem

Renderuj obraz z elementem img, a jeśli src ma wartość null lub jest niezdefiniowany, renderuj obraz zastępczy.

import { FC } from "react";

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

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

Co się dzieje, gdy obraz się nie powiedzie

Za każdym razem, gdy obraz nie ładuje się, wyzwalane jest zdarzenie onError, którego możemy użyć do zaktualizowania src do obrazu zastępczego.

Aktualizacje do poprawki

Zamiast bezpośrednio dodawać opcjonalny warunek obrazu zastępczego, możemy dodać obsługę zdarzenia onError, aby zrobić to samo.

użyj Image Hook

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;

Zewnętrzne linki

• Jakie są inne przyczyny niepowodzenia ładowania obrazu?
• Dlaczego obsłużyłem stan w haku zamiast w komponencie Image?