Angular 加载新图像时是否删除图像？

我有一个项目列表，单击该列表时，将显示一个更大的信息面板，其中包含有关所单击项目的更详细信息。我正在设置图像标记的源，如下所示：

<img [src]="'/imgs/' + id + '.png'" />

我使用Chrome的网络节流来模拟慢速网络

当我点击第一个项目（项目A）时，这个img标签得到了它的src集，你会看到图像A一次出现一点。但是，当您单击第二个项目（项目B）时，图像A将继续完整显示，直到图像B完全下载，然后图像B才会完全显示。同时，所有其他信息都已完全加载，因此在详细信息窗格中，我会看到B项的所有详细信息，但我会继续看到a项的图像。没有迹象表明装载正在进行

理论上，我觉得有几种方法可以回答这个问题。例如，当选择一个新项目时，我可以通过使用ajax请求新图像，显示一个加载图标，直到新图像完全加载。我担心使用ajax发出请求意味着我将丢失浏览器本机使用的缓存。如果我选择项目A，然后选择项目B，然后返回到项目A，我希望图像A能够立即加载，因为它已经在缓存中了，并且它目前正在使用我上面的内容进行加载。我不认为ajax请求是缓存的，所以这是一种倒退。我还可以为处理更改的映像编写一个新组件，但这似乎有些过分，可能会遇到相同的缓存问题

---

使用Angular2修改src时，显示图像标记当前正在更改为新图像的首选方式是什么？有没有比直接操纵src更好的方法可以让我指示图像正在更改？

使用

*ngIf

和

触发的
load
事件

---

当您更改

id

属性时，由于

ngIf

从DOM中删除标记，因此也会设置

isLoading=true
如果条件为false，则更改src实际上不会触发图像下载。这意味着永远不会调用
（加载）
来停止加载。但我打赌我可以使用
display:none
来实现这一点。
<img *ngIf="isLoading" [src]="'/imgs/' + loading + '.png'" />
<img [hidden]="isLoading" [src]="'/imgs/' + id + '.png'" (load)="isLoading = false"/>