找不到源图像时如何静默隐藏“找不到图像”图标

Question

你知道当找不到图像文件时如何从呈现的 HTML 页面中隐藏经典的 “找不到图像” 图标吗？

任何使用 JavaScript/jQuery/CSS 的工作方法？

原文由 systempuntoout 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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 属性指向该图像。

原文由 Andy E 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

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

原文由 Gary Willoughby 发布，翻译遵循 CC BY-SA 2.5 许可协议