我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误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 " >
其他回答
隐藏图像alt与此
img {
color: transparent;
}
使用object标签。在标签之间添加可选文本,如下所示:
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
http://www.w3schools.com/tags/tag_object.asp
不管人们在这里说什么,你根本不需要JavaScript,甚至不需要CSS!
这实际上是非常可行和简单的HTML。 如果图像未加载,您甚至可以显示默认图像。这就是……
这也适用于所有浏览器,甚至早在IE8(在2015年9月我主持的网站的25万多名访问者中,没有人使用比IE8更糟糕的浏览器,这意味着这个解决方案几乎适用于所有浏览器)。
步骤1:将图像引用为对象而不是img。当对象失败时,它们不会显示损坏的图标;他们什么都不做。从IE8开始,你可以交替使用object和img标记。你可以调整大小,做所有的光荣的事情,你可以与常规的图像。不要害怕object标签;它只是一个标签,没有大的和笨重的加载,它不会减慢任何东西。您将使用另一个名称使用img标记。速度测试表明它们的使用方式是一样的。
步骤2:(可选,但很棒)在对象中插入默认图像。如果你想要的图像实际加载到对象中,默认图像将不会显示。例如,你可以显示一个用户头像列表,如果有人在服务器上还没有图像,它可以显示占位符图像……根本不需要JavaScript或CSS,但你得到了大多数人需要JavaScript的功能。
这是代码…
<object data="avatar.jpg" type="image/jpeg">
<img src="default.jpg" />
</object>
... 是的,就是这么简单。
如果你想用CSS实现默认的图像,你可以让它在你的HTML更简单,像这样…
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>
...并添加CSS从这个答案-> https://stackoverflow.com/a/32928240/3196360
编辑:并不能真正解决问题,但可能仍然有用。
这就是我对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();
}
Angular隐藏破碎图像的方式。
Html文件内部
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
内部Ts文件
public showImage = true;