我如何隐藏破碎的图像图标? 例子:

我有一个图像与错误src:

<img src="Error.src"/>

该解决方案必须适用于所有浏览器。


当前回答

我将以别人的答案为基础。而不是隐藏标签(可能有重要的样式),给它一个虚拟的图像:

<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>

其他回答

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

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

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

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

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

这是一个老问题,但这里有一些工作,这里的主要技巧是永远不要设置一个固定的高度和宽度的图像,我只使用百分比。

.example { background - color: # e7e7e7; 填充:25 px; } .image-box { 高度:50 px; 宽度:50 px; border - radius: 8 px; Background-color: rgb(241,255,255); 颜色:rgb(241, 245, 249); 溢出:隐藏; 显示:块; 位置:相对; } .image { 显示:块; max-width: 100%; 高度:100%; object-fit:封面; } < div class = "榜样”> < span class = " image-box”> <img class="image" src="/broken.jpeg" alt> . jpg < / span > < / div >

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

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

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

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

在理论:

严格的“css only”,我们没有干净的选择。看到其他答案,我没什么可补充的。

在实践中:

我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的,原则是一样的,只是如果你不直接添加样式声明会更优雅。相反,添加一个以后可以针对的类:

   <img src="..." onerror="this.classList.add('notfound')">

现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯,把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。


旁注,在有人评论“这不是一个css唯一的解决方案”之前:是的,谢谢你,队长,确实不是。我试图帮助解决问题本身,一个很多人可能会遇到的问题,而不仅仅是看确切的措辞。

其他人所描述的同样的想法在React中工作如下:

<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>