Reactの画像読み込みで415エラーが発生する場合のデフォルト画像表示方法

概要

Reactアプリケーションで画像読み込み時に415エラーが発生した場合、適切にデフォルト画像を表示する方法について解説します。画像の読み込みに関するエラー処理には複数のアプローチがありますが、それぞれの方法には長所と短所があります。本記事では、imgタグのonErrorイベントハンドラー、fetchを用いたコンポーネント内での画像取得、そしてカスタムフックを使用した方法について詳しく説明し、各方法の適切な使い方を示します。

Reactの画像読み込みで415エラーが発生する場合のデフォルト画像表示方法

Reactアプリケーションで画像を表示する際に、画像の読み込みエラーによって415エラー（Unsupported Media Type）が発生することがあります。ここでは、画像の読み込みエラー時にデフォルト画像を表示するための方法について説明します。

NG1: imgタグにonErrorイベントハンドラーを使用する方法

<img
  src="表示したい画像"
  alt=""
  onError={(e: any) => {
    e.target.onerror = null;
    e.target.src = "デフォルト画像";
  }}
/>

この方法では、画像が読み込めなかった場合にonErrorイベントハンドラーを利用してデフォルト画像に切り替えています。しかし、415エラーのようにサーバー側で画像のリクエストが拒否される場合、クライアント側ではonErrorイベントが発火しないことがあるため、適切にエラー処理ができない可能性があります。

NG2: コンポーネント内で画像をfetchする方法

const [imageSrc, setImageSrc] = useState("");
const imagepath = "表示したい画像";

useEffect(() => {
  fetch(imagepath)
    .then((response) => {
      return response;
    })
    .then(() => {
      setImageSrc(imagepath);
    })
    .catch((error) => {
      console.log(error);
      setImageSrc("デフォルト画像");
    });
}, []);

この方法では、fetchを使って画像を取得し、エラーが発生した場合にデフォルト画像に切り替えています。しかし、画像が正常に取得できる場合でも、CORSエラーなどが発生する可能性があり、必ずしも期待通りに動作するとは限りません。

OK: カスタムフックを使用する方法

カスタムフックを使用して、画像の読み込みの成否を判定し、デフォルト画像に切り替える方法です。

export const useImageJudge = (src: any) => {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const checkImagePath = () => {
      return new Promise(function (resolve, reject) {
        const image = new Image();
        image.src = src;
        image.onload = function () {
          resolve(true);
        };
        image.onerror = function (error) {
          reject(error);
        };
      });
    };

    checkImagePath()
      .then(() => {
        setResult(true);
      })
      .catch(() => {
        setResult(false);
      });
  }, [src]);

  return result;
};

‍


この方法では、カスタムフックuseImageJudgeを使用して画像の読み込みが成功したかどうかをチェックし、結果に応じて適切な画像を表示することができます。これにより、エラーが発生した場合にはデフォルト画像を表示することができるため、より信頼性の高いエラー処理が可能です。

まとめ

画像読み込み時のエラー処理にはいくつかのアプローチがあり、それぞれの方法には長所と短所があります。onErrorイベントハンドラーを使用する方法やfetchを用いる方法は簡単ですが、全てのケースに対応できるわけではありません。一方、カスタムフックを使用する方法はより柔軟で信頼性が高いため、エラー処理が重要な場合にはこちらの方法をおすすめします。

‍