Renderizando imagens — a melhor maneira

O que eu costumava fazer

Renderize uma imagem com o elemento img e, se src for nulo ou indefinido, renderize uma imagem alternativa.

import { FC } from "react";

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

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

O que acontece quando uma imagem falha

Sempre que uma imagem falha ao carregar, um evento onError é acionado, podemos usar esse evento para atualizar src para uma imagem de fallback.

Atualizações para a correção

Em vez de adicionar diretamente uma condição opcional da imagem de fallback, podemos adicionar um manipulador de eventos onError para fazer o mesmo.

useImage 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;

Links externos

• Quais são as outras maneiras pelas quais uma imagem pode falhar ao carregar?
• Por que manipulei o estado em um gancho em vez do componente Image?