javascript - 当 Angular 7 中该 url 的资源文件夹中没有 img 时，如何处理错误 404

Question

img 标签在 img 不可用时抛出错误 404，而不是抛出错误我想要一个带有用户名第一个字符的 avtar 图像。假设用户名 Ravi 而不是 R 应该出现而不是错误

我尝试过使用 bool 标志，但它对我来说无法获取我在 alt 属性 list.name.charAt(0) 中尝试过的第一个字符 但仍然出现 img 错误

         <ion-item lines="none">
            <ion-thumbnail slot="start" rounded >
              <ion-img [src]="'assets/icon/' +list?.type+ '.png'" >                
             </ion-img>
            </ion-thumbnail>
            <ion-text slot="end"></ion-text>
            <ion-button  (click)="doAdd(list.type ,'')" slot="end">
                Add link
              </ion-button>
          </ion-item>

当 img 不可用时，输出应该是用户名称的第一个字符而不是错误

Answer 1

图像具有 onerror 属性，对于 ionic 来说是 ionError (参见 docs )，您可以使用它来执行代码。

<img [src]="'assets/icons/'+list?.type+'.png'" (ionError)="handleError(i)">

您可以在此处为图像设置替代 src 属性。

export class MyPage {
  list: YourListType[];

  handleError(index: number) {
    this.list[index].type = 'alternative-image-name';
    // note that in your template you concat that with the `assets/icon` path and the .png ending
  }
}