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

我有一个图像与错误src:

<img src="Error.src"/>

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


当前回答

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

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

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

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

其他回答

在理论:

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

在实践中:

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

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

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


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

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

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

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

隐藏图像alt与此

img {
   color: transparent;
}

如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

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

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

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

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