imgのsrcが存在するかどうかを確認します

Question

imgタグを配置すると、src属性が動的に作成されます。取得を回避するために、src（画像が置かれているパス）が実際にjavascriptで存在するかどうかをテストする方法はありますか？

Answer 1

errorイベントを使用できます：

var im = document.getElementById('imageID'); // or select based on classes
im.onerror = function(){
  // image not found or change src like this as default image:

   im.src = 'new path';
};

インラインバージョン：

<img src="whatever" onError="this.src = 'new default path'" />

または

<img src="whatever" onError="doSomething();" />

---

<img>タグは次のイベントをサポートしています。

• abort（onAbort）
• error（onError）
• load（onLoad）

詳細情報：

• JavaScriptイベント
• jQueryのerror

Answer 2

以前のajax呼び出しを（headメソッドを使用して）行い、サーバーのリターンコードを確認するか、onerrorイベントを使用してURLを変更したり、非表示にしたりできます。

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'">

（アイデアを説明するためだけにインライン属性を使用しました）

Answer 3

Javascriptを使用してsrcを動的に作成する場合、これを使用できます。

var obj = new Image();
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png";

if (obj.complete) {
    alert('worked');
} else {
    alert('doesnt work');
}