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

Code example。查看网络选项卡

Angular-Cli force组件重新加载图像缓存

1 个答案: