如何强制重新创建<img /> src什么时候改变？

Question

我有一个像这样的 Angular 组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'picture',
  templateUrl: './picture.html',
})
export class Picture {
  @Input() pictureUrl: string;
}

<img src="{{pictureUrl}}" />

问题是，当pictureUrl输入属性改变时，Angular只是改变了<img />的src属性，所以浏览器会显示上一张图片，直到加载新图片。 所需的行为是在加载新图片时不显示任何内容或逐步绘制新图片，而不是显示陈旧图片。 通常通过改变图片URL时重新创建<img /> DOM元素来解决。

所以问题是：如何在src属性更改时强制 Angular 8 重新创建/重新挂载<img />元素？ 或者如何在 Angular 中解决所描述的问题？

为了澄清这个问题：如果我使用 React，我会通过将key={pictureUrl}添加到<img />来解决它。

Answer 1

您可以将load事件绑定到图像

<img (load)="HideLoader()" />

加载图像后将触发 load 事件。 您可以在更改图像 src 后使用叠加层显示加载图标，并在加载图像后隐藏加载器，即load事件被触发时。

您可以通过编写自己的 setter 来检测输入属性的变化

@Input() set thePictureURL(url: string) {
    //show loader
    this.pictureUrl = url;
}