在理论:

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

在实践中:

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

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

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

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

缺失的图像要么什么都不显示，要么显示一个[?]样式框，当无法找到它们的源时。相反，你可能想用一个你确定存在的“缺失的图像”图形来替换它，这样就有更好的视觉反馈，表明有问题。或者，你可能想把它完全隐藏起来。这是可能的，因为浏览器无法找到的图像会触发我们可以观察的“错误”JavaScript事件。

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

此外，当发生这种情况时，您可能希望触发某种Ajax操作，向站点管理员发送电子邮件。

我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。

img {
    text-indent: -10000px
}

显然，如果你想看到“alt”属性，它就不起作用了。

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

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

这是一个老问题，但这里有一些工作，这里的主要技巧是永远不要设置一个固定的高度和宽度的图像，我只使用百分比。

.example { background - color: # e7e7e7; 填充:25 px; ｝ .image-box { 高度:50 px; 宽度:50 px; border - radius: 8 px; Background-color: rgb(241,255,255); 颜色:rgb(241, 245, 249); 溢出:隐藏; 显示:块; 位置:相对; ｝ .image { 显示:块; max-width: 100%; 高度:100%; object-fit:封面; ｝ < div class = "榜样”> < span class = " image-box”> <img class="image" src="/broken.jpeg" alt> . jpg < / span > < / div >

可以使用before和after作为样式，以防止图像损坏。

<img src="Error.src">

img:before {
  content: url("image.jpg");
}

img:after {
  content: "(url: " attr(src) ")";
}

在这种情况下，如果src中的图像被破坏了，它将使用之前的内容，如果没有错误，它将使用src。