如何隐藏图片损坏图标只使用CSS / HTML（不含js）
我怎样才能隐藏破碎的图像图标？ 例如 ： 
我有一个错误的图像src：
<img src="Error.src"/> 该解决scheme必须在所有浏览器中工作。
只使用CSS或HTML，而不是JS。
CSS / HTML无法知道图像是否断开链接，所以无论如何您都必须使用JavaScript
但是，这是隐藏图像的最小方法，或者用备份replace源代码。
<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">
尽pipe人们在这里说什么，你根本不需要JavaScript，你甚至不需要CSS！
只有HTML，这实际上是非常可行和简单的。 如果图像不加载，您甚至可以显示默认图像 。 就是这样…
这也适用于所有的浏览器，即使早在IE8（我在2015年9月托pipe的网站中有超过25万的访问者， ZERO的人使用比IE8更糟糕的东西，这意味着这个解决scheme几乎适用于所有的东西 ）。
第1步：引用图像作为一个对象，而不是一个img 。 当对象失败时，它们不会显示破碎的图标; 他们什么都不做 从IE8开始，可以交换使用Object和Img标签。 您可以resize，并使用常规图像来做所有的光荣事情。 不要害怕对象标签; 它只是一个标签，没有什么大而笨重的东西被加载，它不会减慢速度。 你只需要使用另一个名字的img标签。 速度testing显示它们的使用方式相同。
第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
在https://bitsofco.de/styling-broken-images/find了一个很好的解决scheme
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.comhttp://img.dovov.comI/218eLEn0fuL.png" alt="A bird" style="width: 120px">
我喜欢Nick的答案 ，并且正在玩这个解决scheme。 find一个更清洁的方法 因为:: before / :: pseudos不能在img和object之类的replace元素上工作，所以只有在对象数据（src）没有加载的情况下才能工作。 它保持HTML更干净，只会添加伪如果对象加载失败。
http://codepen.io/anon/pen/xwqJKQ
<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object> <object data="http://broken.img/url" type="image/png"></object> object { position: relative; float: left; display: block; width: 200px; height: 200px; margin-right: 20px; border: 1px solid black; &::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ''; background: red url('http://placehold.it/200x200'); } }
只使用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; }
这是一个工作小提琴： http : //jsfiddle.net/xbK6g/
注：我在小提琴的CSS中添加了边框，以示范图像的位置。
我认为最简单的方法是通过text-indent属性来隐藏破碎的图像图标。
img { text-indent: -10000px }
如果你想看到“alt”属性，它是不行的。
如果您需要仍然可以看到图像容器，因为稍后会填充图像容器，并且不想显示和隐藏图像容器，则可以在src中粘贴1×1透明图像：
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
我用这个确切的目的。 我有一个图像容器，将有一个图像加载到它通过Ajax。 由于图片很大，需要加载一些，所以需要在Gif加载条的CSS中设置背景图片。
但是，由于src是空的，所以在使用它的浏览器中仍然出现了破碎的图标图标。
设置透明的1×1 Gif可以简单有效地解决这个问题，不需要通过CSS或JavaScript添加代码。
缺失图像将不显示任何内容，或显示[？ ]样式框，当他们的来源不能被发现时。 相反，你可能想用一个你确定存在的“缺失图像”graphics取代它，所以有更好的视觉反馈，这是错误的。 或者，你可能想要完全隐藏它。 这是可能的，因为浏览器无法find我们可以观察到的“错误”JavaScript事件的图像。
//Replace source $('img').error(function(){ $(this).attr('src', 'missing.png'); }); //Or, hide them $("img").error(function(){ $(this).hide(); });
另外，当发生这种情况时，您可能希望触发某种Ajax操作，将电子邮件发送给网站pipe理员。
使用对象标签。 在标签之间添加替代文字，如下所示：
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
对于未来的谷歌，在2016年有一个浏览器安全纯CSS的方式隐藏空图像使用属性select器：
img[src="Error.src"] { display: none; }
没有任何代码要求的基本和非常简单的方法就是提供一个空的alt语句。 浏览器然后将图像返回为空白。 这看起来就像图像不在那里。
例：
<img class="img_gal" alt="" src="awesome.jpg">
试试看！ ;)
