代码之家  ›  专栏  ›  技术社区  ›  Angelux

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

  •  0
  • Angelux  · 技术社区  · 7 年前

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

    我有一个用户可以更改其图像的功能。它的工作方式很有魅力,但当我更改它时,左侧菜单中的图片是旧图片(URL是相同的,当我通过浏览器的URL时,我可以看到新图片)。我想这是因为当我上传新图像时,左侧面板不会刷新,因为它有旧图像的缓存。

    有没有办法解决这个问题?例如强制组件刷新、删除图像缓存等?

    1 回复  |  直到 7 年前
        1
  •  3
  •   Yerkon    7 年前

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

    所以你可以 时间戳 到末尾的映像路径:

     //   <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 . 查看网络选项卡