在理论:

严格的“css only”，我们没有干净的选择。看到其他答案，我没什么可补充的。

在实践中:

我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的，原则是一样的，只是如果你不直接添加样式声明会更优雅。相反，添加一个以后可以针对的类:

   <img src="..." onerror="this.classList.add('notfound')">

现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯，把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。

旁注，在有人评论“这不是一个css唯一的解决方案”之前:是的，谢谢你，队长，确实不是。我试图帮助解决问题本身，一个很多人可能会遇到的问题，而不仅仅是看确切的措辞。

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

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

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

or

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

更新

你可以一次将这个逻辑应用到多个图像上，如下所示:

文档。addEventListener("DOMContentLoaded"，函数(事件){ document.querySelectorAll (img) .forEach(函数(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的回答。你不能隐藏整个图像，但是你可以改变破碎图标的外观。

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

这实际上是非常可行和简单的HTML。 如果图像未加载，您甚至可以显示默认图像。这就是……

这也适用于所有浏览器，甚至早在IE8(在2015年9月我主持的网站的25万多名访问者中，没有人使用比IE8更糟糕的浏览器，这意味着这个解决方案几乎适用于所有浏览器)。

步骤1:将图像引用为对象而不是img。当对象失败时，它们不会显示损坏的图标;他们什么都不做。从IE8开始，你可以交替使用object和img标记。你可以调整大小，做所有的光荣的事情，你可以与常规的图像。不要害怕object标签;它只是一个标签，没有大的和笨重的加载，它不会减慢任何东西。您将使用另一个名称使用img标记。速度测试表明它们的使用方式是一样的。

步骤2:(可选，但很棒)在对象中插入默认图像。如果你想要的图像实际加载到对象中，默认图像将不会显示。例如，你可以显示一个用户头像列表，如果有人在服务器上还没有图像，它可以显示占位符图像……根本不需要JavaScript或CSS，但你得到了大多数人需要JavaScript的功能。

这是代码…

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

．.． 是的，就是这么简单。

如果你想用CSS实现默认的图像，你可以让它在你的HTML更简单，像这样…

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

.．.并添加CSS从这个答案-> https://stackoverflow.com/a/32928240/3196360

一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。

例子:

<img class="img_gal" alt="" src="awesome.jpg">

试试看吧!；）

编辑:并不能真正解决问题，但可能仍然有用。

这就是我对SASS/SCSS所做的。我有实用工具scss文件，其中包含这个mixin:

  @mixin fallback() {
    background-image: url('/assets/imgs/fallback.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
  }

它在.scss中的用法

img {
  // ...
  @include fallback();
}

如果你将添加alt与文本alt="abc"，它将显示显示腐败缩略图，和alt消息abc

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

如果你不添加alt，它将显示显示腐败缩略图

<img src="pic_trulli.jpg"/>

如果你想把坏掉的藏起来 只需添加alt=""它将不会显示损坏的缩略图和任何alt消息(不使用js)

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

如果你想把坏掉的藏起来 只需添加alt="" & onerror="this.style。Display ='none'"它不会显示损坏的缩略图和任何Alt消息(与js)

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

第四个有点危险(不完全是) ，如果你想在onerror事件中添加任何图像，即使image作为样式存在，它也不会显示。显示就像加法。因此，当您不需要任何替代图像显示时使用它。

display: 'none'; // in css

如果我们在CSS中给出它，那么项目将不会显示(像image, iframe, div之类的)。

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

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