禁用浏览器中的图像缓存

Question

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

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

我试图添加到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>问题。 假定的解决方案是您需要从服务器发送正确的标头，以告知浏览器不要缓存纹理。 如果无法设置正确的标题，一种解决方法是将查询参数添加到图像URL。

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

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

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