我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
您可以按照此路径作为css解决方案
img { 宽度:200 px; 身高:200 px; 位置:相对 } img:{后 内容:“”; 位置:绝对的; 上图:0; 左:0; 宽度:继承; 高度:继承; #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder')无重复中心; 颜色:透明; } < img src = " gdfgd.jpg " >
其他回答
对于未来的谷歌人来说,2016年有一种浏览器安全的纯CSS方式,可以使用属性选择器隐藏空图像:
img[src="Error.src"] {
display: none;
}
编辑:我回来了——对于未来的谷歌人来说,2019年有一种方法可以在Shadow Dom中设置实际的alt文本和alt文本图像,但它只在开发人员工具中有效。所以你不能用它。对不起。那太好了。
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。
例子:
<img class="img_gal" alt="" src="awesome.jpg">
试试看吧!;)
如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
编辑:并不能真正解决问题,但可能仍然有用。
这就是我对SASS/SCSS所做的。我有实用工具scss文件,其中包含这个mixin:
@mixin fallback() {
background-image: url('/assets/imgs/fallback.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
它在.scss中的用法
img {
// ...
@include fallback();
}
其他人所描述的同样的想法在React中工作如下:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>