我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
我将以别人的答案为基础。而不是隐藏标签(可能有重要的样式),给它一个虚拟的图像:
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
其他回答
如果你仍然需要让图像容器可见,因为它稍后会被填充,并且不想麻烦地显示和隐藏它,你可以在src中插入一个1x1的透明图像:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yh5baeaaaaalaaaaabaaeaaaibraa7 "/>
我就是为了这个目的用的。我有一个图像容器,它将通过Ajax将图像加载到其中。因为图片比较大,需要一点时间来加载,所以需要在CSS中设置一个Gif加载条的背景图片。
但是,由于src为空,在使用它的浏览器中仍然会出现破碎的图像图标。
设置透明的1x1 Gif简单有效地解决了这个问题,无需通过CSS或JavaScript添加代码。
Angular隐藏破碎图像的方式。
Html文件内部
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
内部Ts文件
public showImage = true;
一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。
例子:
<img class="img_gal" alt="" src="awesome.jpg">
试试看吧!;)
隐藏图像alt与此
img {
color: transparent;
}
我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。
img {
text-indent: -10000px
}
显然,如果你想看到“alt”属性,它就不起作用了。