Reactで画像の読み込みエラーを処理する方法

onerrorイベントを使用する方法:

Reactでは、<img>タグのonErrorイベントを使用して、画像の読み込みエラーを検知することができます。以下のようにコードを記述します。

import React, { useState } from 'react';
const ImageComponent = () => {
  const [imageError, setImageError] = useState(false);
  const handleImageError = () => {
    setImageError(true);
  };
  return (
    <div>
      {imageError ? (
        <p>画像の読み込みエラーが発生しました。</p>
      ) : (
        <img src="path/to/image.jpg" onError={handleImageError} />
      )}
    </div>
  );
};
export default ImageComponent;

上記の例では、ImageComponentコンポーネント内でimageErrorという状態を管理し、handleImageError関数をonErrorイベントとして渡しています。画像の読み込みエラーが発生した場合、imageErrorの値がtrueになり、エラーメッセージが表示されます。

デフォルトのエラー画像を表示する方法:

別のアプローチとして、画像の読み込みエラーが発生した場合に代替のデフォルト画像を表示する方法もあります。以下のようにコードを記述します。

import React from 'react';
const ImageComponent = () => {
  return (
    <div>
      <img src="path/to/image.jpg" onError={(e) => e.target.src = 'path/to/default-image.jpg'} />
    </div>
  );
};
export default ImageComponent;

上記の例では、onErrorイベント内でe.target.srcをデフォルトの画像のパスに設定しています。画像の読み込みエラーが発生すると、代替のデフォルト画像が表示されます。

これらの方法を使用することで、Reactで画像の読み込みエラーを処理することができます。適切な方法を選択し、プロジェクトに組み込んでください。