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

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

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

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

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

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

使用img::after的技巧是一个好东西，但至少有两个缺点:

并非所有浏览器都支持(例如在Edge https://codepen.io/dsheiko/pen/VgYErm上不支持) 你不能简单地隐藏图像，你要覆盖它-所以当你在这种情况下显示默认图像时没有什么帮助

我不知道没有JavaScript的通用解决方案，但只有Firefox有一个不错的:

img:-moz-broken{
  opacity: 0;
}

自2005年以来，Mozilla浏览器(如Firefox)已经支持了非标准的:-moz-broken CSS伪类，它可以完成这个请求:

/* for display purposes so you can see the empty cell */ td { min-width:64px; } img:-moz-broken { display:none; } img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */ <table border="1"><tr><td> <img src="error"> </td><td> <img src="error" alt="error image"> </td><td> <img src="error" alt=""> </td><td> <img src="broken" alt="broken image"> </td><td> <img src="broken" alt=""> </td><td> <img src="https://i.stack.imgur.com/Mkdgc.png" alt="A bird" style="width: 120px"> </td></tr></table>

本例中有几个单元格。从左到右:

没有alt属性的破碎图像(基线):显示破碎图像 带有alt文本的破碎图像(基线):显示alt文本 带有空alt文本的破碎图像(基线):显示alt文本(什么都没有) 一个破碎的图像与alt文本(我们的CSS):隐藏破碎的图像 一个破碎的图像与空alt文本(我们的CSS):显示alt文本(什么都没有) 一个功能图像与alt文本(我们的CSS):显示图像

img::before也可以在Firefox 64中工作(虽然曾经是img::after，所以这是不可靠的)。我不能让这两个在Chrome 71中工作。

最兼容的解决方案是指定alt=""并使用特定于firefox的CSS。

注意，带有空alt属性的破碎图像并不能保证破碎图像图标将被抑制，但这似乎是Firefox 103和Chromium 103中的行为。还要注意，这违反了可访问性准则，因为屏幕阅读器将无法用空alt文本描述项目，这可能会破坏盲人用户的体验。

使用object标签。在标签之间添加可选文本，如下所示:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp