Angular-Cli Force组件重新加载图像缓存 [英] Angular-Cli force component to reload image cache

问题描述

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

I have a project in Angular CLI, it has the lft menu (where I store some navigation and user informations include user image. On the right side there is other part of page.

我具有用户可以更改其图像的功能.它的工作原理就像魅力，但是当我更改它时，左侧菜单中的图片是旧的(URL是相同的，当我将URL传递到浏览器时，我可以看到新图像).我猜它是因为上载新图像时左侧面板不会刷新，因为它具有旧图像的缓存.

I have a feature that user can change his image. Its working like charm but when I change it, the picture in the left menu is old one (the URL is the same, when I past URL to the browser I can see the new image). I guess its becouse the left panel wont refresh when I upload new image si It has cache of old image.

有什么办法解决吗?诸如强制组件刷新，删除图像缓存等?

Is there any way how to solve it? Something like force component to refresh, delete image cache etc?

推荐答案

据我了解，浏览器不会请求图像，因为它已被缓存.这是因为图像路径相同.

If I understand, the browser doesn't do request to image, because it's cached. It's because image path is the same.

因此您可以将时间戳放在图像路径的末尾:

So you can put timestamp to image path at the end:

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

代码示例.查看网络"标签

这篇关于Angular-Cli Force组件重新加载图像缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！