Angular中如何判断图片未加载及处理加载失败场景？

嘿，这个问题我之前也碰到过，其实很容易解决——只需要利用HTML img元素自带的error事件就行，和你已经在用的load事件用法几乎一样。

步骤1：给img标签添加错误事件绑定 #

直接在你现有的img标签上加上(error)事件，绑定到一个新的处理函数，比如imageLoadFailed：

<img 
  *ngIf="(showImage$ | async)" 
  [alt]="image.alt" 
  [title]="image.title" 
  [src]="image.src" 
  (load)="imageHasBeenLoaded($event)"
  (error)="imageLoadFailed($event)"
/>

步骤2：实现错误处理函数 #

在你的组件类里，编写imageLoadFailed函数，根据你的需求做对应的处理。这里给几个常见的场景示例：

// 组件类中的代码
imageLoadFailed(event: Event): void {
  // 把事件目标转换成HTMLImageElement，方便操作
  const imgEl = event.target as HTMLImageElement;

  // 场景1：替换为占位图（推荐，提升用户体验）
  imgEl.src = '/assets/images/placeholder-404.png';
  
  // 场景2：记录错误日志，方便排查问题
  console.error(`图片加载失败，原URL: ${imgEl.src}`, event);
  
  // 场景3：更新组件状态，比如显示错误提示
  this.isImageError = true;
  
  // 场景4：直接隐藏图片（如果不需要占位图的话）
  // imgEl.style.display = 'none';
}

额外优化建议 #

• 如果你的image对象是通过Observable异步获取的，记得在处理错误时确认image已经被正确赋值，或者直接从event.target.src获取原图片地址（像上面例子那样），避免undefined报错。
• 如果你想更优雅地处理，可以结合RxJS，比如在获取图片URL的Observable中提前处理，但直接用error事件是最直观且轻量的方式。
• 可以给占位图也加上错误处理，防止占位图也加载失败（不过这种情况很少见）。

内容的提问来源于stack exchange，提问作者Mackelito