我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
其他回答
只使用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;
}
这是一把能用的小提琴。
注意:我在CSS中添加边界只是为了演示图像的位置。
我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。
img {
text-indent: -10000px
}
显然,如果你想看到“alt”属性,它就不起作用了。
使用img::after的技巧是一个好东西,但至少有两个缺点:
并非所有浏览器都支持(例如在Edge https://codepen.io/dsheiko/pen/VgYErm上不支持) 你不能简单地隐藏图像,你要覆盖它-所以当你在这种情况下显示默认图像时没有什么帮助
我不知道没有JavaScript的通用解决方案,但只有Firefox有一个不错的:
img:-moz-broken{
opacity: 0;
}
使用object标签。在标签之间添加可选文本,如下所示:
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
http://www.w3schools.com/tags/tag_object.asp
缺失的图像要么什么都不显示,要么显示一个[?]样式框,当无法找到它们的源时。相反,你可能想用一个你确定存在的“缺失的图像”图形来替换它,这样就有更好的视觉反馈,表明有问题。或者,你可能想把它完全隐藏起来。这是可能的,因为浏览器无法找到的图像会触发我们可以观察的“错误”JavaScript事件。
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
此外,当发生这种情况时,您可能希望触发某种Ajax操作,向站点管理员发送电子邮件。