您是否知道当未找到图像文件时,如何在呈现的HTML页面中隐藏经典的“找不到图像”图标?
有没有使用JavaScript/jQuery/CSS的工作方法?
发布于 2010-07-13 17:49:35
您可以使用JavaScript中的onerror
事件在图像加载失败时执行操作:
var img = document.getElementById("myImg");
img.onerror = function () {
this.style.display = "none";
}
在jQuery中(既然你问了):
$("#myImg").error(function () {
$(this).hide();
});
或者对于所有图像:
$("img").error(function () {
$(this).hide();
// or $(this).css({visibility:"hidden"});
});
如果隐藏图像可能会更改布局,则应使用visibility: hidden
而不是.hide()
。web上的许多站点使用默认的“无图像”图像,当指定的图像位置不可用时,将src
属性指向该图像。
发布于 2010-07-13 18:12:59
<img onerror='this.style.display = "none"'>
发布于 2016-04-20 18:49:59
我稍微修改了Gary Willoughby建议的解决方案,因为它简单地显示了破碎的图像图标。我的解决方案是:
<img src="..." style="display: none" onload="this.style.display=''">
在我的解决方案中,图像最初是隐藏的,只有在成功加载时才会显示。它有一个缺点:用户看不到半身化的图像。如果用户禁用了JS,那么他们将永远不会看到任何图像
https://stackoverflow.com/questions/3235913
复制相似问题