我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
其他人所描述的同样的想法在React中工作如下:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
其他回答
只使用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中添加边界只是为了演示图像的位置。
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的回答。你不能隐藏整个图像,但是你可以改变破碎图标的外观。
在理论:
严格的“css only”,我们没有干净的选择。看到其他答案,我没什么可补充的。
在实践中:
我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的,原则是一样的,只是如果你不直接添加样式声明会更优雅。相反,添加一个以后可以针对的类:
<img src="..." onerror="this.classList.add('notfound')">
现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯,把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。
旁注,在有人评论“这不是一个css唯一的解决方案”之前:是的,谢谢你,队长,确实不是。我试图帮助解决问题本身,一个很多人可能会遇到的问题,而不仅仅是看确切的措辞。
可以使用before和after作为样式,以防止图像损坏。
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
在这种情况下,如果src中的图像被破坏了,它将使用之前的内容,如果没有错误,它将使用src。
如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}