微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何隐藏图像破碎图标仅使用CSS/HTML(无js)

如何隐藏损坏的图像图标?
例:

我有一个图像错误src:

<img src="Error.src"/>

解决方案必须在所有浏览器中工作。

仅使用CSS或HTML,而不是JS。

解决方法

CSS / HTML没有办法知道图像是否断开链接,所以你将不得不使用JavaScript,无论什么

但这里是一个最小的方法隐藏图像,或替换源的备份。

<img src="Error.src" onerror="this.style.display='none'"/>

要么

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

更新

您可以通过执行以下操作,将此逻辑应用于多个图像:

document.addEventListener("DOMContentLoaded",function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。