在浏览器中禁用图像缓存

Question

我有一个地球天气 Web 应用程序，它每六小时接收一次新的天气图（作为图像）。我想让浏览器不缓存这些图像，让用户体验前几天没有缓存的新鲜天气。我的设置是：

Angular 2 个应用程序使用 --prod 参数构建并通过 ftp
Python "backend" 每六小时下载一次 grib 数据，将其转换为图像并上传到 ftp。

我尝试添加到 header 的 index.html 元数据：

  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>

这些纹理是这样加载的：

   this.ParticlesVelocitiesImage = new Image();
   this.ParticlesVelocitiesImage.src = require('./Textures/dirswindsigma995.jpg');
   this.ParticlesVelocitiesImage.onload = () => {
       this.ParticlesVelocities = this.gl.createTexture();
       this.gl.bindTexture(this.gl.TEXTURE_2D, this.ParticlesVelocities);
       this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.ParticlesVelocitiesImage.width,
       this.ParticlesVelocitiesImage.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.ParticlesVelocitiesImage)
       this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
       this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
    }

但是纹理仍然被缓存。我需要手动清除缓存才能体验最新更新的天气图

更新在 Reactgular 和 gman 响应之后，我开始寻找另一种加载图像的方式。因此，我在组件的 HTML 模板中添加了 <img hidden="true" [src] = "urlwith?timestamp"> 标记，而不是 require()，并在问号后提供 url 和时间戳。然后剩下的是一样的，图像的 onload 功能被触发，我的纹理被加载。但是因为我的 webgl2 应用程序非常需要性能，所以我宁愿避免在 HTML 中渲染其他图像。

Answer 1

这不是纹理问题，而是 <img> 问题。假设的解决方案是您需要从服务器发送正确的 headers 以告诉浏览器不要缓存纹理。如果您无法设置正确的 headers，解决方法是向图像添加查询参数 URL。

const imageUrl = `./Textures/dirswindsigma995.jpg?${Date.now()}`;

现在，每次您请求图片时，浏览器都会看到不同的 URL

请注意，您不太可能为此使用 require。

在浏览器中禁用图像缓存

Disable images caching in browser

webgl

typescript

webgl2

angular