ionic 2/3：是否可以隐藏损坏图像的 "div"？

Question

我想问一下在ionic 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？

Answer 1

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

ionic 2/3：是否可以隐藏损坏图像的 "div"？

ionic 2/3: Is possible to hide the "div" of broken image?

html

image

ionic2

ionic3