如何隐藏损坏的图像图标？ 示例:

我有一个错误 src 的图像:

<img src="Error.src"/>

该解决方案必须适用于所有浏览器。

最佳答案

CSS/HTML 无法知道图片是否链接断开，所以无论如何你都必须使用 JavaScript

但这是隐藏图像或用备份替换源的最小方法。

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

或

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

更新

您可以通过执行以下操作一次将此逻辑应用于多个图像:

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

更新 2

CSS 选项见michalzuber's answer以下。您无法隐藏整个图像，但可以更改损坏图标的外观。

https://stackoverflow.com/questions/22051573/