Angular-Cli 强制组件重新加载图像缓存 [英] 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 强制组件重新加载图像缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！