JS检查是否找不到img

所以，我有以下js img var。JS检查是否找不到img

//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属性。谢谢！

来源

2016-05-31 steve Kim

可能的重复：http://stackoverflow.com/questions/9022427/see-if-src-of-img-exists – Kelvin

一个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/

来源

2016-06-01 00:27:25 rcdmk

另一个好处是，如果您动态更改图像的src属性，处理程序将再次被调用。 – rcdmk

这很不错。谢谢。 ☺️ –

你可以像这样使用后备img;

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

要隐藏你可以这样做这样的元素;

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

来源

2016-06-01 00:05:21 Mark

谢谢你的答复。如果图像不可用，我试图避免显示img属性。谢谢！ –

@steveKim请找到我更新的答案:) – Mark

哈哈。你是对的。我本可以做到这一点。傻我。谢谢马克。 ☺️ –

JS检查是否找不到img

回答

相关问题