Zenn
🏞️

Reactで画像がリンク切れかどうかを確認する方法について

に公開
React
TypeScript
frontend
画像
image
tech

こんにちは、ソフトウェアエンジニアのまさぴょんです！
今回は、Reactで画像がリンク切れかどうかを確認する方法について解説していきます🐱

onErrorイベントを使う方法📝

onErrorイベントを使って、次のSampleCodeのように画像のリンク切れ対応をすることができます👍

// ... existing code ...
{/* クリックで拡大できる画像 */}
{aiRes.imageUrl && (
  <img
    src={aiRes.imageUrl}
    alt={`${aiAgent?.name || "AI"} 生成画像`}
    className="max-w-full h-auto rounded-md cursor-pointer transition-transform hover:scale-105"
    style={{ maxHeight: "150px" }}
    onClick={() =>
      handleImageClick(
        aiRes.imageUrl,
        `${aiAgent?.name || "AI"} 生成画像`
      )
    }
    onError={(e) => {
      // 画像読み込みエラー時の処理
      e.currentTarget.src = '/path/to/fallback-image.png'; // 代替画像
      console.error(`画像読み込みエラー: ${aiRes.imageUrl}`);
    }}
  />
)}
// ... existing code ...

カスタムフックを作成する方法📝

また、次のようなカスタムフックを作成する方法もあります！

useImageStatus.ts
import { useState, useEffect } from 'react';

export const useImageStatus = (url: string): 'loading' | 'error' | 'success' => {
  const [status, setStatus] = useState<'loading' | 'error' | 'success'>('loading');

  useEffect(() => {
    if (!url) {
      setStatus('error');
      return;
    }

    const img = new Image();
    img.onload = () => setStatus('success');
    img.onerror = () => setStatus('error');
    img.src = url;

    return () => {
      img.onload = null;
      img.onerror = null;
    };
  }, [url]);

  return status;
};

このカスタムフックを使用して、コンポーネント内で次のように実装できます。

const imageStatus = useImageStatus(aiRes.imageUrl);

// 画像表示部分
{imageStatus === 'loading' && <div>読み込み中...</div>}
{imageStatus === 'error' && <div>画像を読み込めませんでした</div>}
{imageStatus === 'success' && (
  <img 
    src={aiRes.imageUrl} 
    alt={`${aiAgent?.name || "AI"} 生成画像`}
    // ... 他のprops
  />
)}

まとめ

画像がリンク切れだとUXが落ちるので、工夫していきたいところですね！

Xやってます、フォローよろしくお願いします🙏
https://twitter.com/masanyon1212

Discussion