我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
在https://bitsofco.de/styling-broken-images/找到了一个很好的解决方案
img { position: relative; } /* style this to fit your needs */ /* and remove [alt] to apply to all images*/ img[alt]:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center; content: attr(alt); } <img src="error"> <br> <img src="broken" alt="A broken image"> <br> <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">
其他回答
如果你仍然需要让图像容器可见,因为它稍后会被填充,并且不想麻烦地显示和隐藏它,你可以在src中插入一个1x1的透明图像:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yh5baeaaaaalaaaaabaaeaaaibraa7 "/>
我就是为了这个目的用的。我有一个图像容器,它将通过Ajax将图像加载到其中。因为图片比较大,需要一点时间来加载,所以需要在CSS中设置一个Gif加载条的背景图片。
但是,由于src为空,在使用它的浏览器中仍然会出现破碎的图像图标。
设置透明的1x1 Gif简单有效地解决了这个问题,无需通过CSS或JavaScript添加代码。
只使用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中添加边界只是为了演示图像的位置。
编辑:并不能真正解决问题,但可能仍然有用。
这就是我对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();
}
您可以按照此路径作为css解决方案
img { 宽度:200 px; 身高:200 px; 位置:相对 } img:{后 内容:“”; 位置:绝对的; 上图:0; 左:0; 宽度:继承; 高度:继承; #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder')无重复中心; 颜色:透明; } < img src = " gdfgd.jpg " >
如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}