我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
缺失的图像要么什么都不显示,要么显示一个[?]样式框,当无法找到它们的源时。相反,你可能想用一个你确定存在的“缺失的图像”图形来替换它,这样就有更好的视觉反馈,表明有问题。或者,你可能想把它完全隐藏起来。这是可能的,因为浏览器无法找到的图像会触发我们可以观察的“错误”JavaScript事件。
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
此外,当发生这种情况时,您可能希望触发某种Ajax操作,向站点管理员发送电子邮件。
其他回答
对于未来的谷歌人来说,2016年有一种浏览器安全的纯CSS方式,可以使用属性选择器隐藏空图像:
img[src="Error.src"] {
display: none;
}
编辑:我回来了——对于未来的谷歌人来说,2019年有一种方法可以在Shadow Dom中设置实际的alt文本和alt文本图像,但它只在开发人员工具中有效。所以你不能用它。对不起。那太好了。
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
不管人们在这里说什么,你根本不需要JavaScript,甚至不需要CSS!
这实际上是非常可行和简单的HTML。 如果图像未加载,您甚至可以显示默认图像。这就是……
这也适用于所有浏览器,甚至早在IE8(在2015年9月我主持的网站的25万多名访问者中,没有人使用比IE8更糟糕的浏览器,这意味着这个解决方案几乎适用于所有浏览器)。
步骤1:将图像引用为对象而不是img。当对象失败时,它们不会显示损坏的图标;他们什么都不做。从IE8开始,你可以交替使用object和img标记。你可以调整大小,做所有的光荣的事情,你可以与常规的图像。不要害怕object标签;它只是一个标签,没有大的和笨重的加载,它不会减慢任何东西。您将使用另一个名称使用img标记。速度测试表明它们的使用方式是一样的。
步骤2:(可选,但很棒)在对象中插入默认图像。如果你想要的图像实际加载到对象中,默认图像将不会显示。例如,你可以显示一个用户头像列表,如果有人在服务器上还没有图像,它可以显示占位符图像……根本不需要JavaScript或CSS,但你得到了大多数人需要JavaScript的功能。
这是代码…
<object data="avatar.jpg" type="image/jpeg">
<img src="default.jpg" />
</object>
... 是的,就是这么简单。
如果你想用CSS实现默认的图像,你可以让它在你的HTML更简单,像这样…
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>
...并添加CSS从这个答案-> https://stackoverflow.com/a/32928240/3196360
可以使用before和after作为样式,以防止图像损坏。
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
在这种情况下,如果src中的图像被破坏了,它将使用之前的内容,如果没有错误,它将使用src。
使用img::after的技巧是一个好东西,但至少有两个缺点:
并非所有浏览器都支持(例如在Edge https://codepen.io/dsheiko/pen/VgYErm上不支持) 你不能简单地隐藏图像,你要覆盖它-所以当你在这种情况下显示默认图像时没有什么帮助
我不知道没有JavaScript的通用解决方案,但只有Firefox有一个不错的:
img:-moz-broken{
opacity: 0;
}