Angular4中img元素(load)与(error)事件多次触发问题求助

你的问题根源在于当前的代码逻辑陷入了无限事件循环：当目标图片加载失败时，你把src设为占位图，而占位图加载成功会触发load事件，又会把src改回目标图片，接着目标图片再次加载失败触发error，如此反复切换，导致目标图片永远无法正常显示。

下面提供两种可靠的解决方案，帮你彻底解决这个问题：

方案一：添加加载状态标志位（适用于简单场景） #

给每个图片对象添加一个加载完成的标志，避免重复执行事件逻辑。

模板代码 #

<img 
  src="/assets/img/placeholder.jpg" 
  (error)="imageError($event, image)" 
  (load)="loadImage($event, image)" 
  class="offer-img-mobile img-fluid" 
>

组件代码 #

// 假设你的图片数据结构包含imageurl字段，我们给每个对象新增loaded标志
// 如果是异步获取的数据，记得在数据初始化时给每个image添加loaded: false

imageError(event: Event, image: any) {
  // 只有未完成加载时才执行错误处理
  if (!image.loaded) {
    (event.target as HTMLImageElement).src = '/assets/img/placeholder.jpg';
  }
}

loadImage(event: Event, image: any) {
  // 仅第一次加载时替换为目标图片
  if (!image.loaded) {
    image.loaded = true;
    (event.target as HTMLImageElement).src = image.imageurl;
  }
}

方案二：内存预加载图片（更优雅的实现） #

使用Image对象在内存中预加载目标图片，成功后再更新img标签的src，从根源避免事件循环。

模板代码 #

<img 
  [src]="image.currentUrl || '/assets/img/placeholder.jpg'" 
  class="offer-img-mobile img-fluid" 
>

组件代码 #

// 假设你的图片数组
images: Array<{ imageurl: string; currentUrl?: string }> = [];

ngOnInit() {
  // 如果是异步获取图片数据，要在数据返回后执行下面的逻辑
  this.loadImages();
}

private loadImages() {
  this.images.forEach(image => {
    const preloadImg = new Image();
    // 预加载成功，更新currentUrl为目标图片地址
    preloadImg.onload = () => {
      image.currentUrl = image.imageurl;
    };
    // 预加载失败，保持占位图
    preloadImg.onerror = () => {
      image.currentUrl = '/assets/img/placeholder.jpg';
    };
    // 开始预加载
    preloadImg.src = image.imageurl;
  });
}

这种方法的优势在于：图片的加载逻辑完全在内存中完成，不会触发img标签的load/error事件循环，同时能更精准地控制图片的显示状态。

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