javascript - 如何在角度动态更改src属性时隐藏图像

Question

在更改 src 标签值时，有没有办法在加载新图像时隐藏或删除图像。

示例代码：

<img [src]="dynamicPath">
<button (click)="changeSrc()">Change Image Src</button>

在组件中：

dynamicPath = 'somePath.jpg';
changeSrc(){
    this.dynamicPath = 'newPath.jpg';
}

此代码的问题在于，单击按钮后，旧图像仍然显示，直到新图像完全加载，这是不希望的。
有没有办法删除它或显示正在加载新图像的提示？

请注意：我的案例不允许一次预加载多个图像的解决方案。

标签： javascriptangularangular6

Answer 1

*ngIf您可以使用以下方式从 DOM 中删除图像，

<img *ngIf="dynamicPath!=''" [src]="dynamicPath">
<button (click)="changeSrc()">Change Image Src</button>

您可以将变量设置为空字符串' '，如下所示

dynamicPath = 'somePath.jpg';
changeSrc(){
      this.dynamicPath ='';
      this.dynamicPath = 'newPath.jpg';
}