画像が表示されない

画像にアクセスできない状態です。画像を正しく表示するには、その画像への外部からのアクセスを許可する必要があります。

確認方法

画像の読み込み失敗の原因を判断するには、ブラウザの開発者ツールを開き、ネットワークタブで、表示されていない画像のリクエストを見つけます。
そのリクエストのレスポンスにエラーコードがないか確認します。

原因と解決方法

CORS エラー

症状

コンソールに以下のような警告メッセージが表示される。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [URL].

原因

画像を配信しているサーバーが、拡張機能からのクロスオリジンリクエストを許可していません。

解決方法

画像を配信しているサーバーで、適切な CORS ヘッダーを設定してください。

Access-Control-Allow-Origin: *

または、特定のオリジンのみ許可する場合は、リクエスト元のオリジンを指定してください。

画像が存在しない（HTTP 404）

症状

ネットワークタブでステータスコードが 404 Not Found になっている。

原因

指定した URL に画像ファイルが存在しません。

解決方法

• URL のパスやファイル名にタイプミスがないか確認してください
• 画像ファイルが指定した場所に正しくアップロードされているか確認してください

アクセス権限がない（HTTP 403）

症状

ネットワークタブでステータスコードが 403 Forbidden になっている。

原因

サーバーが画像へのアクセスを拒否しています。

解決方法

• 画像ファイルのアクセス権限を確認してください
• サーバーの設定で、外部からのアクセスが許可されているか確認してください

キャッシュの問題

症状

画像を更新したのに古い画像が表示される、または画像が表示されない。

原因

ブラウザまたは CDN がキャッシュした古いレスポンスを返しています。

解決方法

• ブラウザのキャッシュをクリアしてページを再読み込みしてください
• 開発者ツールの「ネットワーク」タブで「キャッシュを無効化」オプションを有効にしてテストしてください

Content-Type の不一致

症状

ネットワークタブでリクエストは成功（200）しているが、画像が表示されない。

原因

サーバーが返す Content-Type ヘッダーが画像の実際の形式と一致していません。

解決方法

• ネットワークタブでレスポンスヘッダーの Content-Type を確認してください
• 画像形式に応じた正しい Content-Type を設定してください
  • PNG: image/png
  • JPEG: image/jpeg
  • SVG: image/svg+xml
  • WebP: image/webp