如何仅使用 CSS/HTML 隐藏图像损坏的图标？

Question

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

我有一个错误 src 的图像：

 <img src="Error.src"/>

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

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

Answer 1

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 的回答。您无法隐藏整个图像，但可以更改损坏图标的外观。

原文由 Kevin Jantzer 发布，翻译遵循 CC BY-SA 3.0 许可协议