Angular-Cli Force組件重新加載圖像緩存

Question

我在Angular CLI中有一個項目，它具有lft菜單（我在其中存儲了一些導航，並且用戶信息包括用戶圖像 。在頁面的右側）。

我具有用戶可以更改其圖像的功能。 它的工作原理就像魅力，但是當我更改它時，左菜單中的圖片是舊的（URL相同，當我將URL傳遞到瀏覽器時，我可以看到新圖像）。 我猜它是因為當我上傳新圖像時它的左側面板不會刷新，因為它具有舊圖像的緩存。

有什么辦法解決嗎？ 諸如強制組件刷新，刪除圖像緩存等？

Answer 1

據我了解，瀏覽器不會請求圖像，因為它已被緩存。 這是因為圖像路徑相同。

因此，您可以將時間戳記放在圖像路徑的末尾：

 //   <img [src] = '/path/to/image?timeStamp=123123' />


    class SomeComponent{
    imageSrc: string = '/path/to/image';
//    getTimeStamp(): number{
//     return Date.now();
//    }

    // or call this when you need update image

    updateImageSrc(): string{
       this.imageSrc= `/path/to/image?timeStamp=${Date.now()}`

    }

    }

更新：

 <img [src] = "imageSrc" />

代碼示例 。 查看網絡標簽