【问题标题】：Error events for failed load images in ionic tags离子标签中加载图像失败的错误事件
【发布时间】：2019-08-23 13:36:23
【问题描述】：

我有这个 ion-img 标签

<ion-avatar [ngClass]="cssClass">
  <ion-img
  [src]="avatar"
  (ionError)="failedImageLoad($event)"></ion-img>
</ion-avatar>

当图像加载失败时我需要发送一个错误事件，这个(ionError) 事件在 ion-img 标签的文档中，但它确实有效，并且其他事件处理程序工作正常，有人知道任何其他错误事件处理程序？

【问题讨论】：

您使用的是哪个版本？可能是从 ionic 4.2 中添加的 ionError
这能回答你的问题吗？ how to handle error 404 when img is not avilable in assest folder of that url in angular 7

标签： angular error-handling event-handling ionic4 angular7

【解决方案1】：

我的图片加载错误解决方案

<img class="avatar" [src]="merchant.logo_url" (error)="errorImage(img)" #img />



  errorImage(img) {
    
    img.src = '../../../../../../assets/svg-icons/022-menu.svg'
  }

【讨论】：

【解决方案2】：

似乎你还有其他事情正在为我工作：

<ion-img src="notfound.png" (ionError)="onError()"></ion-img>

在代码隐藏中使用此处理程序：

  onError() {
    console.log("IMG ERROR");
  }

这个输出：

您确定您的错误处理函数名称正确吗？

failedImageLoad()

更新

根据您的评论，您正在处理 403 错误。

我 looked at the code 和 ionError 实际上只是 html img onerror 事件的包装。

这是defined on mdn：

src 属性为空或 null。
指定的 src URL 与用户当前所在页面的 URL 相同。
指定的图像以某种方式损坏，导致无法加载。
指定图像的元数据已损坏，无法检索其尺寸，并且元素属性中未指定尺寸。
指定图像的格式不受用户代理支持。

看来应该是触发错误了。

请确定：您这次提到了两个单独的文件，这不在您的原始问题中。你把图像处理程序放在他们两个中了吗？

【讨论】：

两个文件中的函数名称相同，但是在 ion-img 标签中绑定的是一个链接，当服务器中不存在图像时，该链接会在控制台中引发403 forbidden 错误，也许 ionError 函数不认为这是一个错误？

【解决方案3】：

简单的解决方案。

ionError：解决方案

fallbackUrl = 'assets/img/fallback-image.png';
<ion-img  [src]="user.userMg" (ionError)="user.userMg = fallbackUrl"></ion-img>

【讨论】：

你叫什么甜？