Reactでimgのエラーが起きた時に代わりの画像を表示させる方法

はじめに

ReactでWebサービスを開発する際、apiから持ってきた画像のurlを表示させることは多々あると思います。
そのとき何らかの原因で画像が表示できないと、なんとも言えない残念なUIになってしまいます。

そこで、imgタグにonError　というイベントハンドラーを使用することによって、画像が読み込めなかった時にデフォルトの画像を表示させるというようなことができます。

実際にやってみる

import defaultImage from "src/assets/default_image.png";

const Image = ({ src, alt }: { src: string; alt: string }) => {
    return (
            <img
                src={src}
                alt={alt}
                onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.src = defaultImage;
                }}
            />
    );
};

このように書くと、たとえsrcの画像がエラーになった時でも、defaultImageを表示させることができます。

またこれを関数として切り出すと、もっと使いやすくなります。
例えば、アイコンやヘッダー、サムネイルなどの種類によって画像を分けたいときは以下のように書くことができます。

const imageLoadErrorHandler = (
    e: React.SyntheticEvent<HTMLImageElement, Event>,
    imageType: "header" | "thumbnail" | "icon"
) => {
    const target = e.target as HTMLImageElement;

    switch (imageType) {
        case "header":
            target.src = defaultHeader;
            break;
        case "thumbnail":
            target.src = defaultThumbnail;
            break;
        case "icon":
            target.src = defaultIcon;
            break;
        default:
            break;
    }
};

// 使用するとき

const Image = ({ src, alt }: { src: string; alt: string }) => {
    return (
            <img
                src={src}
                alt={alt}
                onError={(e) => {
                    imageLoadErrorHandler(e,"icon")
                }}
            />
    );
};

おわりに

最後までお読みいただきありがとうございました！
もっといい方法などありましたらコメントに書いていただけると嬉しいです!

参考リンクなど