[解決済み] 画像の読み込みに失敗した理由を知るにはどうしたらいいですか?
質問
あるページに 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 );
});
サーバー側からは、サーバーログをチェックし、正しいリクエストを検索し、何が起こったかを確認することができます。もしリクエストがサーバーに届かなかったら、ネットワーク/ルーティング/ファイアウォールの問題かもしれません。
ただし、そのための手順は、バックエンドで何が使われているかに大きく依存します。
関連
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】module.exports "モジュールが定義されていません"