我有一个网页,里面有很多图片。有时映像不可用,因此在客户机的浏览器中显示一个损坏的映像。
我如何使用jQuery来获取图像集,过滤它到破碎的图像,然后替换src?
—我本以为用jQuery会更容易做到这一点,但事实证明使用纯JavaScript解决方案更容易,也就是Prestaul提供的解决方案。
我有一个网页,里面有很多图片。有时映像不可用,因此在客户机的浏览器中显示一个损坏的映像。
我如何使用jQuery来获取图像集,过滤它到破碎的图像,然后替换src?
—我本以为用jQuery会更容易做到这一点,但事实证明使用纯JavaScript解决方案更容易,也就是Prestaul提供的解决方案。
当前回答
我也有同样的问题。这个代码在我的案子上很有效。
// Replace broken images by a default img
$('img').each(function(){
if($(this).attr('src') === ''){
this.src = '/default_feature_image.png';
}
});
其他回答
这是一个快速和肮脏的方法来替换所有破碎的图像,没有必要改变HTML代码;)
codepen例子
$("img").each(function(){
var img = $(this);
var image = new Image();
image.src = $(img).attr("src");
var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
$(img).unbind("error").attr("src", no_image).css({
height: $(img).css("height"),
width: $(img).css("width"),
});
}
});
我也有同样的问题。这个代码在我的案子上很有效。
// Replace broken images by a default img
$('img').each(function(){
if($(this).attr('src') === ''){
this.src = '/default_feature_image.png';
}
});
我使用内置的错误处理程序:
$("img").error(function () {
$(this).unbind("error").attr("src", "broken.gif");
});
编辑:error()方法在jquery 1.8及更高版本中已弃用。相反,你应该使用.on("error"):
$("img").on("error", function () {
$(this).attr("src", "broken.gif");
});
这是一个蹩脚的技巧,但它几乎是可以保证的:
<img onerror="this.parentNode.removeChild(this);">
如果你已经用innerHTML插入了img,比如:$("div")。innerHTML = <img src="wrong-uri">,你可以加载另一个图像,如果它失败了,例如:
<script>
function imgError(img) {
img.error="";
img.src="valid-uri";
}
</script>
<img src="wrong-uri" onerror="javascript:imgError(this)">
为什么javascript: _needed?因为通过innerHTML中的脚本标记注入DOM的脚本在注入时不会运行,所以必须显式。