JS检查是否没有找到img答案

【问题标题】：JS check if img is not foundJS检查是否没有找到img
【发布时间】：2016-09-30 03:46:59
【问题描述】：

所以，我有以下 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 属性。谢谢！

【问题讨论】：

可能重复：stackoverflow.com/questions/9022427/see-if-src-of-img-exists

标签： jquery image

【解决方案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/

【讨论】：

一个优点是，如果你动态改变图片的src属性，handlers会被再次调用。

【解决方案2】：

您可以像这样使用后备 img；

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

要隐藏元素，您可以这样做；

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

【讨论】：

感谢您的回复。如果图像不可用，我会尽量避免一起显示 img 属性。谢谢！