1. ホーム
  2. javascript

[解決済み] 画像の読み込みに失敗した理由を知るにはどうしたらいいですか?

2022-02-16 08:48:15

質問

あるページに img 要素があり、その src がページロード時に動的に設定されています(状況に応じて異なる画像、画像はクライアントから提供されます)。

画像の読み込みに失敗した場合、それを検知し、報告することで対処しています。また、読み込みに失敗した場合は、プレースホルダー画像を設定するようにしています。

<img alt="Image not found" onError="failedToLoadResource" id="something" class="class1 class2">

これは素晴らしい機能です。しかし、画像の読み込みに失敗したことを知るだけでは、本当に十分ではありません。なぜそれが起こったのかを特定できるようにする必要があります。画像は私たちのサーバーでホストされているので、404はありえないことですが、不可能ではありません。私はクライアントのデバイスにアクセスできないので、クライアントが説明したような問題を再現することができません。

いろいろと調べてみたのですが、探しているものが見つかりません...。

404かもしれないし、CSPの設定の問題かもしれないし、インターネット接続の不具合かもしれないし、何でもいいんです。私はただ、それが何であるかを知りたいのです。

EDIT: コードはCordovaアプリの中にあるので、確認するログがないことを言い忘れました。

解決方法は?

クライアント側から、ajaxを呼び出し、その応答を解析することで、画像にアクセスすることができます。jQueryを使えば簡単にできます。

var call = $.ajax( "image.img" )
  .fail(function( call, textStatus ) {
    alert( "Request failed: " + textStatus );
  });

サーバー側からは、サーバーログをチェックし、正しいリクエストを検索し、何が起こったかを確認することができます。もしリクエストがサーバーに届かなかったら、ネットワーク/ルーティング/ファイアウォールの問題かもしれません。

ただし、そのための手順は、バックエンドで何が使われているかに大きく依存します。