JS imgが見つからないかどうかを確認します。

Question

したがって、次のjs img varがあります。

//Where `img_src` is another variable which actual image file MIGHT or MIGHT NOT exist. 
var img_source = "/images/" + img_src; 
return '<img src="' + img_source + '">';  

img_srcは、時には私が404 Not Foundエラーを取得しています、使用できない場合がありますので。

画像がない場合、別の機能を実行したいと思います。

この場合、画像ファイルが利用可能かどうかを確認するにはどうすればよいですか？

画像が利用できない場合は、img属性をすべて表示しないようにしています。ありがとう！

Answer 1

jQueryの方法はerrorイベントに耳を傾けるようになります：純粋なJavaScriptで

var img = $("<img src='http://no-image.com/' />"); 

img.on('load', function(e){ 
    alert('Success!'); 
}).on('error', function(e) { 
    alert('ERROR!'); 
}); 

img.appendTo("body"); 

https://jsfiddle.net/j70oybvy/

：

var img = document.createElement('img'); 

img.src='http://no-image.com/'; 

img.onload = function(e){ 
    alert('Success!'); 
}; 

img.onerror = function(e) { 
    alert('ERROR!'); 
}; 

document.body.appendChild(img); 

https://jsfiddle.net/j70oybvy/1/

Answer 2

このようにフォールバックimgを使用できます。

<img onerror="this.onerror=null; this.src='img/fallback.png'" /> 

要素を非表示にするには、次のようにします。

<img onerror="this.onerror=null; this.style.display = 'none'" />