我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
使用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
使用img::after的技巧是一个好东西,但至少有两个缺点:
并非所有浏览器都支持(例如在Edge https://codepen.io/dsheiko/pen/VgYErm上不支持) 你不能简单地隐藏图像,你要覆盖它-所以当你在这种情况下显示默认图像时没有什么帮助
我不知道没有JavaScript的通用解决方案,但只有Firefox有一个不错的:
img:-moz-broken{
opacity: 0;
}
如果你将添加alt与文本alt="abc",它将显示显示腐败缩略图,和alt消息abc
<img src="pic_trulli.jpg" alt="abc"/>
如果你不添加alt,它将显示显示腐败缩略图
<img src="pic_trulli.jpg"/>
如果你想把坏掉的藏起来 只需添加alt=""它将不会显示损坏的缩略图和任何alt消息(不使用js)
<img src="pic_trulli.jpg" alt=""/>
如果你想把坏掉的藏起来 只需添加alt="" & onerror="this.style。Display ='none'"它不会显示损坏的缩略图和任何Alt消息(与js)
<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
第四个有点危险(不完全是) ,如果你想在onerror事件中添加任何图像,即使image作为样式存在,它也不会显示。显示就像加法。因此,当您不需要任何替代图像显示时使用它。
display: 'none'; // in css
如果我们在CSS中给出它,那么项目将不会显示(像image, iframe, div之类的)。
如果你想显示图像&你想显示完全空白,如果错误,那么你可以使用,但也要小心,这不会占用任何空间。所以,你需要把它保存在一个div中
链接https://jsfiddle.net/02d9yshw/
其他人所描述的同样的想法在React中工作如下:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
我将以别人的答案为基础。而不是隐藏标签(可能有重要的样式),给它一个虚拟的图像:
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>