Angular图片不存在时加载默认图 event.target未定义如何处理

问题根因 #

你遇到的报错本质是两种场景下传入changeSource的event对象类型不匹配：

• img标签加载失败触发的error回调传入的是DOM事件对象，target属性指向对应的img元素，所以该场景下赋值逻辑正常
• 接口请求失败的回调里你传入的是HTTP请求错误对象，不存在target属性，访问event.target.src自然会抛出undefined错误，导致默认图无法渲染

解决方案 #

调整接口失败场景的处理逻辑，遵循Angular数据驱动的设计思路，直接给封面数组赋值默认地址即可，不需要通过DOM操作修改src，同时优化原有方法的健壮性：

1. 修改component.ts代码 #

// 抽离默认封面为公共常量，避免重复硬编码
readonly defaultCoverUrl = "https://imageurl";
coverPhotos: string[] = [];
errors: any;

this.myService.getPhotos(ImageType.Cover, this.id).subscribe(
  result => {
    // 增加返回结果为空的兜底逻辑
    this.coverPhotos = result.length > 0 ? result : [this.defaultCoverUrl];
  },
  error => {
    this.errors = error;
    // 接口请求失败直接赋值默认封面，不需要调用changeSource
    this.coverPhotos = [this.defaultCoverUrl];
  }
);

// 优化方法，增加类型判断避免异常报错
changeSource(event: Event) {
  const imgElement = event.target as HTMLImageElement;
  if (imgElement) {
    imgElement.src = this.defaultCoverUrl;
  }
}

2. 可选优化component.html代码 #

用Angular属性绑定代替插值写法，更符合框架规范：

<div *ngFor="let coverPhoto of coverPhotos">
  <img [src]="coverPhoto" (error)="changeSource($event)" />
</div>

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