Angular-Cli 强制组件重新加载图像缓存答案

【问题标题】：Angular-Cli force component to reload image cacheAngular-Cli 强制组件重新加载图像缓存
【发布时间】：2018-03-18 02:08:19
【问题描述】：

我在 Angular CLI 中有一个项目，它有 lft 菜单（我在其中存储一些导航和用户信息包括用户图像。右侧是页面的其他部分。

我有一个功能，用户可以改变他的形象。它像魅力一样工作，但是当我更改它时，左侧菜单中的图片是旧的（URL 是相同的，当我将 URL 传递到浏览器时，我可以看到新图像）。我猜它是因为当我上传新图像时左侧面板不会刷新它有旧图像的缓存。

有什么办法可以解决吗？像强制组件刷新，删除图像缓存等？

【问题讨论】：

你确定不是浏览器的缓存？您可以检查网络选项卡是否从缓存中“重新加载”，然后您可以将时间戳添加到文件或类似的东西
提交表单后网络选项卡中有一些请求。 f5重新加载后我可以看到新图片了。
这个问题毫无意义，因为不知道“左侧菜单中的图片”是关于什么的。代码相关问题应包含stackoverflow.com/help/mcve
您能否发布代码以显示您如何为此呈现 html，以便我们可以为您提供一些帮助？

标签： javascript angular angular-cli

【解决方案1】：

如果我理解，浏览器不会请求图像，因为它已被缓存。这是因为图像路径是相同的。

所以你可以把 timestamp 放在最后的图片路径中：

 //   <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" />

Code example。查看网络标签

【讨论】：