React: ユーティリティ <img> コンポーネント（エラーハンドリング / alt 設定）

alt 設定）

March 6, 2022

こんなのどうでしょう？ #

const fallbackImage = '...';

type Props = {
  src: JSX.IntrinsicElements['img']['src'];
  alt?: JSX.IntrinsicElements['img']['alt'];
  srcOnError?: JSX.IntrinsicElements['img']['src'];
  className?: JSX.IntrinsicElements['img']['className'];
};

function Component(props: Props) {
  const { src, alt, srcOnError, className } = props;
  const srcFileName = src?.split('/').pop()?.split('.').shift();
  return (
    <img
      className={className}
      src={src}
      alt={alt || srcFileName}
      onError={(e) => {
        e.currentTarget.onerror = null;
        e.currentTarget.src = srcOnError ?? fallbackImage;
      }}
    />
  );
}

export const Image = Component;

嬉しい点１：エラー時のハンドリング #

ネットワークエラー等で画像が取得できなかったときは、自動でフォールバック用の画像を設定してくれます。

onError={(e) => {
  e.currentTarget.onerror = null;
  e.currentTarget.src = srcOnError ?? fallbackImage;
}}

嬉しい点２：alt 属性を自動で設定 #

alt を明記しなかった場合、画像のファイル名を自動で alt に設定してくれます。

// src が '/public/images/my-dog.jpg' だった場合 srcFileName は 'my-dog'

const srcFileName = src?.split('/').pop()?.split('.').shift();

alt={alt || srcFileName}