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事件：

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/

在純JavaScript：

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'" />