我喜欢尼克的答案，并一直在研究这个解决方案。找到了一个更干净的方法。由于::before/::after伪元素不能用于替换的元素，如img和object，它们只在对象数据(src)未加载时才会工作。它使HTML更加清晰，并且只在对象加载失败时才添加pseudo。

对象{ 位置:相对; 浮:左; 显示:块; 宽度:200 px; 身高:200 px; margin-right: 20 px; 边框:1px纯黑色; ｝ 对象::{后 位置:绝对的; 上图:0; 左:0; 显示:块; 宽度:100%; 高度:100%; 内容:”; 背景:红色url(“http://placehold.it/200x200”); ｝ <object data="http://lorempixel.com/200/200/people/1" type="image/png"></object> . <对象数据= " http://broken。img / url " type = " / png图像“> < /对象>

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

我喜欢尼克的答案，并一直在研究这个解决方案。找到了一个更干净的方法。由于::before/::after伪元素不能用于替换的元素，如img和object，它们只在对象数据(src)未加载时才会工作。它使HTML更加清晰，并且只在对象加载失败时才添加pseudo。

对象{ 位置:相对; 浮:左; 显示:块; 宽度:200 px; 身高:200 px; margin-right: 20 px; 边框:1px纯黑色; ｝ 对象::{后 位置:绝对的; 上图:0; 左:0; 显示:块; 宽度:100%; 高度:100%; 内容:”; 背景:红色url(“http://placehold.it/200x200”); ｝ <object data="http://lorempixel.com/200/200/people/1" type="image/png"></object> . <对象数据= " http://broken。img / url " type = " / png图像“> < /对象>

您可以按照此路径作为css解决方案

img { 宽度:200 px; 身高:200 px; 位置:相对 ｝ img:{后 内容:“”; 位置:绝对的; 上图:0; 左:0; 宽度:继承; 高度:继承; #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder')无重复中心; 颜色:透明; ｝ < img src = " gdfgd.jpg " >

不管人们在这里说什么，你根本不需要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

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的回答。你不能隐藏整个图像，但是你可以改变破碎图标的外观。