如何在找不到src源图像时静默隐藏"未找到图像"图标

Question

当找不到图像文件时,您知道如何从呈现的HTML页面隐藏经典的"图像未找到"图标吗？

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

Answer 1

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

Answer 2

您可以使用onerrorJavaScript中的事件在图像加载失败时执行操作:

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当指定的图像位置不可用时将属性指向该图像.

Answer 3

我已经稍微修改了Gary Willoughby建议的解决方案，因为它会短暂显示损坏的图像。我的解决方案：

    <img src="..." style="display: none" onload="this.style.display=''">

在我的解决方案中，图像最初是隐藏的，仅在成功加载后才显示。它有一个缺点：用户将看不到一半的图像。如果用户禁用了JS，那么他将永远看不到任何图像

Answer 4

要隐藏每个图像错误，只需在页面底部（恰好在body标记之前）添加以下JavaScript：

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Answer 5

回答可能有点晚了，但这是我的尝试。当我遇到同样的问题时，我通过使用图像大小的 div 并将背景图像设置为此 div 来修复它。如果未找到图像，则 div 将呈现为透明，因此无需 java 脚本代码即可静默完成所有操作。