如何在离子应用程序中设置默认图像

Question

我正在尝试向离子应用程序添加默认图像。目前，我正在通过数据库表行中的链接获取应用程序内的图像。但是，如果图像不再存在或链接已损坏，我希望应用程序显示default/fall-back图像而不是这个默认的撕开绘画图标。

这是我尝试让它工作的方法之一，但它没有。

        <ion-card transparent class="detailView" *ngFor="let act of activities">
        <img class="img" src="{{act.image}}"
        onerror="this.src='assets/imgs/defualt.jpg';" alt = "Missing Image" />

{{act.image}}与数据库对话，准确地与数据库中的活动表对话并提取图像链接。如果无法显示图像，如何实现默认选项？

一些额外的花絮；该应用程序是用Ionic框架编写的，并实现了Typescript、Sass和Angular 的使用。

Answer 1

这是你可以做的。

<img [src]="act.image" alt="Missing image" onerror="this.onerror=null;this.src='assets/imgs/default.jpg';" />

您使用本地保存的文件作为默认文件，因此不太可能发生，但为了更好的实践，清除“onerror”以避免在“回退”图像不存在的情况下无限循环。