如果你仍然需要让图像容器可见，因为它稍后会被填充，并且不想麻烦地显示和隐藏它，你可以在src中插入一个1x1的透明图像:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yh5baeaaaaalaaaaabaaeaaaibraa7 "/>

我就是为了这个目的用的。我有一个图像容器，它将通过Ajax将图像加载到其中。因为图片比较大，需要一点时间来加载，所以需要在CSS中设置一个Gif加载条的背景图片。

但是，由于src为空，在使用它的浏览器中仍然会出现破碎的图像图标。

设置透明的1x1 Gif简单有效地解决了这个问题，无需通过CSS或JavaScript添加代码。

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

img {
    text-indent: -10000px
}

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

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

例子:

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

试试看吧!；）

对于未来的谷歌人来说，2016年有一种浏览器安全的纯CSS方式，可以使用属性选择器隐藏空图像:

img[src="Error.src"] {
    display: none;
}

编辑:我回来了——对于未来的谷歌人来说，2019年有一种方法可以在Shadow Dom中设置实际的alt文本和alt文本图像，但它只在开发人员工具中有效。所以你不能用它。对不起。那太好了。

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}

我喜欢尼克的答案，并一直在研究这个解决方案。找到了一个更干净的方法。由于::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是很困难的，但是你可以使用CSS的background-image而不是<img>标签…

就像这样:

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

这是一把能用的小提琴。

注意:我在CSS中添加边界只是为了演示图像的位置。