Angular中相同图片URL重复更新致错误图闪烁的UI控制咨询

图片加载失败时会显示“未找到图片”的错误图，但由于Car模型被快速更新（尽管每次更新时modelNum和car.code并未变化，生成的图片URL也完全相同），导致img的src被频繁重复赋值，错误图出现闪烁问题。相关代码如下：

<img src="{{imgSrc}}{{car.modelNum | carName:car.code}}" onerror="this.src='assets/images/no-car-image.jpg';" />

补充说明：该图片位于*ngFor指令内部（更新于2023年1月25日）

1. 用trackBy优化*ngFor的渲染逻辑 #

Angular默认会在数组引用变化时重新渲染所有*ngFor项，哪怕只是对象引用更新而非实际数据变化。添加trackBy函数能让Angular只渲染真正发生数据变化的项：

• 在组件类中定义追踪函数：

trackByCarKey(index: number, car: any): string {
  // 用car的唯一标识作为追踪依据，比如modelNum和code的组合
  return `${car.modelNum}-${car.code}`;
}

• 在模板的*ngFor中应用：

<div *ngFor="let car of cars; trackBy: trackByCarKey">
  <img src="{{imgSrc}}{{car.modelNum | carName:car.code}}" onerror="this.src='assets/images/no-car-image.jpg';" />
</div>

这样只有当modelNum或code真正改变时，Angular才会重新渲染对应的图片元素，避免不必要的src重复赋值。

2. 优化onerror逻辑，避免重复设置错误图 #

直接在onerror事件中判断当前src是否已经是错误图，防止重复赋值触发闪烁：

<img 
  src="{{imgSrc}}{{car.modelNum | carName:car.code}}" 
  onerror="if(this.src !== 'assets/images/no-car-image.jpg') this.src='assets/images/no-car-image.jpg';" 
/>

3. 缓存图片URL，避免重复计算 #

在组件中创建缓存对象，存储已生成的图片URL，确保相同参数下不会重复计算和赋值：

• 组件类中实现缓存逻辑：

private imageUrlCache = new Map<string, string>();

getImageUrl(car: any): string {
  const cacheKey = `${car.modelNum}-${car.code}`;
  if (!this.imageUrlCache.has(cacheKey)) {
    const url = `${this.imgSrc}${this.carNamePipe.transform(car.modelNum, car.code)}`;
    this.imageUrlCache.set(cacheKey, url);
  }
  return this.imageUrlCache.get(cacheKey)!;
}

• 模板中调用该方法：

<img [src]="getImageUrl(car)" onerror="this.src='assets/images/no-car-image.jpg';" />

搭配trackBy使用，能进一步减少不必要的渲染操作。

内容的提问来源于stack exchange，提问作者Anil P Babu