我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
其他人所描述的同样的想法在React中工作如下:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
其他回答
使用img::after的技巧是一个好东西,但至少有两个缺点:
并非所有浏览器都支持(例如在Edge https://codepen.io/dsheiko/pen/VgYErm上不支持) 你不能简单地隐藏图像,你要覆盖它-所以当你在这种情况下显示默认图像时没有什么帮助
我不知道没有JavaScript的通用解决方案,但只有Firefox有一个不错的:
img:-moz-broken{
opacity: 0;
}
我将以别人的答案为基础。而不是隐藏标签(可能有重要的样式),给它一个虚拟的图像:
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
CSS/HTML没有办法知道图像是否断开链接,所以无论如何你都必须使用JavaScript
但这里有一个隐藏图像或用备份替换源的最小方法。
<img src="Error.src" onerror="this.style.display='none'"/>
or
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
更新
你可以一次将这个逻辑应用到多个图像上,如下所示:
文档。addEventListener("DOMContentLoaded",函数(事件){ document.querySelectorAll (img) .forEach(函数(img) { img。Onerror = function(){this.style.display='none';}; }) }); < img src = " error.src " > < img src = " error.src " > < img src = " error.src " > < img src = " error.src " >
更新2
关于CSS选项,请参阅下面michalzuber的回答。你不能隐藏整个图像,但是你可以改变破碎图标的外观。
对于未来的谷歌人来说,2016年有一种浏览器安全的纯CSS方式,可以使用属性选择器隐藏空图像:
img[src="Error.src"] {
display: none;
}
编辑:我回来了——对于未来的谷歌人来说,2019年有一种方法可以在Shadow Dom中设置实际的alt文本和alt文本图像,但它只在开发人员工具中有效。所以你不能用它。对不起。那太好了。
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
缺失的图像要么什么都不显示,要么显示一个[?]样式框,当无法找到它们的源时。相反,你可能想用一个你确定存在的“缺失的图像”图形来替换它,这样就有更好的视觉反馈,表明有问题。或者,你可能想把它完全隐藏起来。这是可能的,因为浏览器无法找到的图像会触发我们可以观察的“错误”JavaScript事件。
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
此外,当发生这种情况时,您可能希望触发某种Ajax操作,向站点管理员发送电子邮件。