如何只使用 CSS 隐藏 html 的 image 损坏的图标？

为了隐藏HTML中图像损坏的图标，可以使用CSS的伪元素来覆盖默认的图像损坏图标。以下是一个常用的方法，它利用了::before或::after伪元素来实现。

css
img {
  /* 当图像未能加载时，将其内容设置为空 */
  display: block;
  font-family: 'arial';
  color: transparent;
  width: 200px; /* 设置为你希望的宽度 */
  height: 200px; /* 设置为你希望的高度 */
}

img::before {
  /* 在图像位置展示的内容，这里使用空内容来隐藏损坏的图标 */
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ccc; /* 可以使用其他颜色或背景图案 */
}

img:not([src]), img[src=""] {
  visibility: hidden;
}

此代码块做了以下几件事情：

1. 设置图像尺寸：width和height属性用于指定图像的占位大小。

2. 隐藏损坏的图标：使用img::before创建一个伪元素，content属性设置为空字符串，这将覆盖默认的图像损坏图标。

3. 设置一个备用背景：可以通过background属性设置一个颜色或者图案，作为图像损坏时的背景。这是可选的，如果你不希望有任何东西显示，可以省略这一步。

4. 隐藏没有src的图像：img:not([src]), img[src=""]选择器用来选中那些没有src属性或者src为空字符串的img元素，并将其visibility属性设置为hidden，以确保这些元素不会在页面上显示。

请注意，这种方法的效果可能依赖于不同浏览器的实现以及图像损坏时浏览器的默认行为。此外，如果你希望支持屏幕阅读器用户，隐藏图像的同时请确保使用适当的alt文本描述，以便屏幕阅读器仍然可以提供图像的信息。

CSS/HTML 无法知道图像链接是否已损坏，因此无论如何您都必须使用 JavaScript

但这里有一个隐藏图像或用备份替换源的最小方法。

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

或者

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

更新

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

shell
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">

运行代码片段Hide results

展开片段

更新2

对于**CSS 选项，**请参阅下面michalzuber 的回答。您无法隐藏整个图像，但可以更改损坏图标的外观。

不管人们在这里怎么说，你根本不需要 JavaScript，甚至不需要 CSS！

实际上，仅使用 HTML 就非常可行且简单。
如果图像未加载，您甚至可以显示默认图像。就是这样...

这也适用于所有浏览器，甚至早到 IE8（在 2015 年 9 月我托管的网站的 250,000 多名访问者中，零个人使用了比 IE8 更糟糕的浏览器，这意味着该解决方案几乎适用于所有浏览器）。

步骤 1：将图像引用为对象而不是img。当对象失败时，它们不会显示损坏的图标；他们只是什么都不做。从 IE8 开始，您可以互换使用 object 和 img 标签。您还可以调整大小并使用常规图像做所有您可以做的事情。不要害怕对象标签；它只是一个标签，不会加载任何大而笨重的东西，也不会减慢任何东西。您只需使用另一个名称的 img 标签即可。速度测试表明它们的使用方式相同。

第 2 步：（**可选，但非常棒）**将默认图像粘贴到该对象内。如果您想要的图像实际加载_到对象中_，则默认图像将不会显示。例如，您可以显示用户头像列表，如果某人在服务器上还没有图像，它可以显示占位符图像...根本不需要 JavaScript 或 CSS，但您可以获得以下功能大多数人都需要 JavaScript。

这是代码...

shell
<object data="avatar.jpg" type="image/jpeg">
    <img src="default.jpg" />
</object>

……是的，就是这么简单。

如果你想用 CSS 实现默认图像，你可以在 HTML 中使其变得更简单，如下所示......

shell
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>

...只需添加此答案中的 CSS -> https://stackoverflow.com/a/32928240/3196360

在https://bitsofco.de/styling-broken-images/找到了一个很好的解决方案

shell
img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

运行代码片段Hide results

展开片段

如果您添加带有文本**alt="abc"**的 alt ，它将显示显示损坏的缩略图，以及 alt 消息 abc

shell
<img src="pic_trulli.jpg" alt="abc"/>

如果您不添加 alt，它将显示“显示损坏的缩略图”

shell
<img src="pic_trulli.jpg"/>

如果你想隐藏损坏的，只需添加**alt=""**它不会显示损坏的缩略图和任何 alt 消息（不使用 js）

shell
<img src="pic_trulli.jpg" alt=""/>

如果你想隐藏损坏的，只需添加**alt="" & onerror="this.style.display='none'"**它不会显示损坏的缩略图和任何 alt 消息（带有 js）

shell
<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

第四个有点危险（不完全是），如果你想在onerror事件中添加任何图像，即使图像存在，它也不会显示，因为style.display就像添加一样。因此，当您不需要显示任何替代图像时，请使用它。

shell
display: 'none'; // in css

如果我们在 CSS 中给出它，那么该项目将不会显示（如 image、iframe、div 等）。

如果你想显示图像并且你想在错误时显示完全空白，那么你可以使用，但也要小心这不会占用任何空间。所以，你需要将它保存在 div 中

链接https://jsfiddle.net/02d9yshw/

我认为最简单的方法是通过文本缩进属性隐藏损坏的图像图标。

shell
img {
    text-indent: -10000px
}

显然，如果你想看到“alt”属性，这是行不通的。