【Reactの小技】画像の表示

画像があったらその画像を、無かったらデフォ画像を、そしてさらに、画像の読み込みに失敗しても（画像が壊れてしまっているケースは多々ある）デフォ画像を表示したい場合によく利用する。

import { useState, useEffect } from "react";

import { Image as ChakraImage, ImageProps } from "@chakra-ui/react";

const grayPixelBase64 ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHPmzH8ACDADZKt3GNsAAAAASUVORK5CYII=";

type Props = Omit<ImageProps, "src"> & {
  src?: string | null;
};

function Image(props: Props) {
  const [src, setSrc] = useState<string>();

  useEffect(() => {
    setSrc(props.src ?? grayPixelBase64);
  }, [props.src]);

  return (
    <ChakraImage
      {...props}
      src={src}
      onError={() => {
        setSrc(grayPixelBase64);
      }}
    />
  );
}

export default Image;

grayPixelBase64は1pxのグレーの画像だがちゃんとデザインされたデフォ画像が良い。