当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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:当IMG在角7中URL的Asest文件夹中不可用时如何处理错误404

基础教程推荐