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

Question

您是否知道在 找不到 图像文件时如何从呈现的HTML页面中隐藏经典的 “未找到图像” 图标？

有使用JavaScript / jQuery / CSS的工作方法吗？

Answer 1

您可以使用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()。网络上的许多站点都使用默认的“无图像”图像，src当指定的图像位置不可用时，将属性指向该图像。