当 src 更改时如何强制重新创建 <img />？

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元素来解决。

所以问题是：当 Angular 8 的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;
}