离子2/3:可以隐藏破碎图像的“div”吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了离子2/3:可以隐藏破碎图像的“div”吗?相关的知识,希望对你有一定的参考价值。

我想问一下隐藏离子3中破碎图像的“div”

我可以使用“onerror”来隐藏图像,但div的位置并没有隐藏。这是我的代码:

<div *ngFor="let item of list;">
    <div style="width: calc(100%/2); float:left; position:relative; padding-bottom: calc(100%/2);">
        <img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" 
                    [src]="item.img" alt="Norway" 
                    onerror="this.style.opacity='0'" (click)="viewImage(item)"/>
    </div>
</div>

那么,如果图像坏了,有没有解决方法来修复和隐藏div?

答案

onerror将无法在img标签中运行,就像这样

<div *ngFor="let item of list;let i = index">
    <div style="width: calc(100%/2); float:left; position:relative; padding-bottom: calc(100%/2);">
        <img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;"
                    [style.opacity]="error[i] ? 0 : 1"
                    [src]="item.img" alt="Norway" 
                    (error)="error[i] = true" (click)="viewImage(item)"/>
    </div>
</div>

在你的ts文件中声明

 error:boolean[] = []

检查demo

以上是关于离子2/3:可以隐藏破碎图像的“div”吗?的主要内容,如果未能解决你的问题,请参考以下文章

离子 2 /3 ; Onclick 时更改图像 src 标签

使用 div 作为提交按钮

离子卡背景透明白色

使用 svg 图像屏蔽 div 内容

将隐藏的DIV保存为画布图像

如果图像未悬停,则隐藏 div