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

我有一个图像与错误src:

<img src="Error.src"/>

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


当前回答

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

img {
    text-indent: -10000px
}

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

其他回答

可以使用before和after作为样式,以防止图像损坏。

<img src="Error.src">

img:before {
  content: url("image.jpg");
}

img:after {
  content: "(url: " attr(src) ")";
}

在这种情况下,如果src中的图像被破坏了,它将使用之前的内容,如果没有错误,它将使用src。

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

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

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

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

.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 >

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

img {
    text-indent: -10000px
}

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

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

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

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

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