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