当IMG在角7中URL的Asest文件夹中不可用时如何处理错误404-前端问题

how to handle error 404 when img is not avilable in assest folder of that url in angular 7(当IMG在角7中URL的Asest文件夹中不可用时如何处理错误404)

本文介绍了当IMG在角7中URL的Asest文件夹中不可用时如何处理错误404的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

img标记在img不可用时抛出错误404，而不是抛出错误，我想要一个用户名为第一个字符的avtar图像。假设用户名Ravi Than R应该出现而不是错误我已尝试使用布尔标志，但它不适用于我在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不可用时，输出应该是用户名称的第一个字符，而不是错误

推荐答案

镜像有onerror属性，对于ion是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
  }
}

这篇关于当IMG在角7中URL的Asest文件夹中不可用时如何处理错误404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！