如何隐藏损坏的图像图标？ 示例：
我有一个错误 src 的图像：
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
【问题讨论】：
仅使用 CSS 很困难，但您可以使用 CSS 的 background-image 代替 <img> 标记...
类似这样的：
HTML
<div id="image"></div>
CSS
#image {
background-image: url(Error.src);
width: //width of image;
height: //height of image;
}
这是一个有效的fiddle。
注意：我在小提琴的 CSS 中添加了边框，只是为了演示图像的位置。
【讨论】：
CSS/HTML 无法知道图片是否链接断开，所以无论如何你都必须使用 JavaScript
但这是隐藏图像或用备份替换源的最小方法。
<img src="Error.src" onerror="this.style.display='none'"/>
或
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
您可以通过执行以下操作一次将此逻辑应用于多个图像：
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">有关 CSS 选项，请参阅下面的 michalzuber's answer。您无法隐藏整个图像，但可以更改损坏图标的外观。
【讨论】：
不管人们在这里说什么，你根本不需要 JavaScript，甚至不需要 CSS！
仅使用 HTML 实际上非常可行且简单。
如果图片未加载，您甚至可以显示默认图片。方法如下...
这也适用于所有浏览器，甚至可以追溯到 IE8（我在 2015 年 9 月托管的网站的 250,000 多名访问者中，零人使用的东西比 IE8 更差，这意味着该解决方案适用于字面上的一切）。
第 1 步：将图像引用为 object 而不是 img。当对象失败时，它们不会显示损坏的图标；他们什么也不做。从 IE8 开始，您可以互换使用 object 和 img 标签。您也可以调整大小并使用常规图像完成所有精彩的工作。不要害怕对象标签；它只是一个标签，不会加载任何大而笨重的东西，也不会减慢任何速度。您将只使用另一个名称的 img 标签。速度测试表明它们的使用方式相同。
第 2 步：（可选，但很棒） 在该对象内粘贴默认图像。如果您想要的图像实际加载到对象中，则不会显示默认图像。因此，例如，您可以显示用户头像列表，如果有人在服务器上还没有图像，它可以显示占位符图像......根本不需要 JavaScript 或 CSS，但您可以获得大多数人都需要 JavaScript。
这里是代码...
<object data="avatar.jpg" type="image/jpg">
<img src="default.jpg" />
</object>
...是的，就是这么简单。
如果你想用 CSS 实现默认图像，你可以像这样在你的 HTML 中让它变得更简单......
<object class="avatar" data="user21.jpg" type="image/jpg"></object>
...只需添加此答案中的 CSS -> https://stackoverflow.com/a/32928240/3196360
【讨论】：
<object> 标签而不是<img> 标签。这种方法是否符合 HTML5 并被所有主流浏览器正确呈现？
无需任何代码即可完成此操作的一种基本且非常简单的方法是只提供一个空的 alt 语句。然后浏览器会将图像返回为空白。它看起来就像没有图像一样。
例子：
<img class="img_gal" alt="" src="awesome.jpg">
试试看！ ;)
【讨论】：
alt=""，它不会呈现损坏的图像图标。 Firefox 也是如此。
如果您需要让图像容器仍然可见，因为它稍后会被填充，并且不想费心显示和隐藏它，您可以在 src 中粘贴一个 1x1 透明图像：
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
我将它用于这个确切的目的。我有一个图像容器，它将通过 Ajax 将图像加载到其中。由于图片较大且加载时间较长，因此需要在 Gif 加载栏的 CSS 中设置背景图片。
但是因为src的src是空的，所以在使用它的浏览器中还是会出现破损的图片图标。
设置透明的 1x1 Gif 可以简单有效地解决此问题，无需通过 CSS 或 JavaScript 添加代码。
【讨论】：
我喜欢Nick 的answer 并且正在玩这个解决方案。找到了更清洁的方法。由于 ::before/::after 伪函数不适用于 img 和 object 等替换元素，因此它们仅在未加载对象数据 (src) 时才有效。它使 HTML 更干净，并且只会在对象加载失败时添加伪。
object {
position: relative;
float: left;
display: block;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid black;
}
object::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
background: red url("http://placehold.it/200x200");
}<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>
<object data="http://broken.img/url" type="image/png"></object>【讨论】：
<img>一样）并通过content: attr(alt);看到它，样式化@ 987654327@-bracket as display: flex; justify-content: center, …，仍然有避免'经典'损坏图像图标的好处......或<title>-tag，不确定什么被认为更“无障碍”......
在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">【讨论】：
img[alt]::before。如果你愿意，可以使用display:inline-block，因为它更接近原版。
我认为最简单的方法是通过 text-indent 属性隐藏损坏的图像图标。
img {
text-indent: -10000px
}
如果您想查看“alt”属性，显然它不起作用。
【讨论】：
使用对象标签。在标签之间添加替代文本，如下所示：
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
【讨论】：
丢失的图像要么不显示，要么显示 [ ? ] 样式框，当它们的源无法找到时。相反，您可能希望将其替换为您确定存在的“缺失图像”图形，以便有更好的视觉反馈来表明存在问题。或者，您可能想完全隐藏它。这是可能的，因为浏览器找不到的图像会触发我们可以观察的“错误”JavaScript 事件。
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
此外，您可能希望在发生这种情况时触发某种 Ajax 操作以向站点管理员发送电子邮件。
【讨论】：
对于未来的谷歌人，2016 年有一种浏览器安全的纯 CSS 方法可以使用属性选择器隐藏空图像：
img[src="Error.src"] {
display: none;
}
编辑：我回来了 - 对于未来的谷歌人，在 2019 中有一种方法可以在 Shadow Dom 中设置实际替代文本和替代文本图像的样式，但是它仅适用于开发人员工具。所以你不能使用它。对不起。会很好。
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
【讨论】：
img[src=''] { display: none; } 这再次与 eBay html 模板相关
您可以按照这条路径作为 css 解决方案
img {
width:200px;
height:200px;
position:relative
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
color: transparent;
}<img src="gdfgd.jpg">【讨论】：
如果您想保留/需要图像作为占位符，您可以使用 onerror 和一些 CSS 将不透明度更改为 0 来设置图像大小。这样您就不会看到损坏的链接，但页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
【讨论】：
从2005开始，火狐等Mozilla浏览器已经支持非标准的:-moz-broken CSS伪类，可以完全完成这个请求：
td {
min-width:64px; /* for display purposes so you can see the empty cell */
}
img[alt]:-moz-broken {
display:none;
}<table border="1"><tr><td>
<img src="error">
</td><td>
<img src="broken" alt="A broken image">
</td><td>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
alt="A bird" style="width: 120px">
</td></tr></table>img[alt]::before 也可以在 Firefox 64 中使用（尽管曾几何时它是 img[alt]::after，所以这是不可靠的）。我无法让其中任何一个在 Chrome 71 中工作。
【讨论】：
img::after 的技巧是个好东西，但至少有两个缺点：
我不知道没有 JavaScript 的通用解决方案，但只有 Firefox 有一个不错的解决方案：
img:-moz-broken{
opacity: 0;
}
【讨论】：
如果您要添加带有文本 alt="abc" 的 alt，它将显示显示损坏的缩略图和 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事件中添加任何图像，即使图像存在，它也不会显示为style.display就像添加一样。因此，当您不需要显示任何替代图像时使用它。
display: 'none'; // in css
如果我们在 CSS 中给出它，那么该项目将不会显示（如 image、iframe、div 之类的）。
如果你想显示图像并且你想在错误时显示完全空白的空间，那么你可以使用，但也要注意这不会占用任何空间。所以，你需要把它保存在一个 div 中可能是
【讨论】：
alt=""！这就是字面意思！谢谢你。很高兴我滚动到页面底部。我正在使用延迟加载，尚未加载的帧内图像（因为浏览器错误地认为视口尚未滚动到它们）显示为损坏的图像。一个小卷轴，它们又出现了。代替他们的破碎图像是如此丑陋
width 和height 设置了尺寸，这将不起作用。
alt="" 仅适用于没有设置尺寸的图像？ （显然只适用于演示图像，否则 alt 是可访问性的基础）？
与其他人描述的相同的想法在 React 中工作如下：
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
【讨论】：
edit：实际上并没有解决所提出的问题，但可能仍然有用。
这就是我对 SASS/SCSS 所做的。我有包含此 mixin 的实用程序 scss 文件：
@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();
}
【讨论】：
您可以使用 before 和 after 作为样式来防止损坏的图像。
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
这种情况下，如果src中的图片坏了，就使用之前的内容，如果没有错误就使用src。
【讨论】：