Flask/JS刷新频率咨询：本地实时图片显示刷新异常问题

这绝对是浏览器缓存在作祟！我之前做类似的本地图片预览功能时也踩过一模一样的坑。

问题根源 #

浏览器为了提升加载速度，会自动缓存静态资源（比如图片、CSS、JS）。当你更新了服务器上的tree.jpg文件后，页面里的图片引用还是原来的URL，浏览器会直接从本地缓存里取旧图，不会主动去服务器拉新的。而你直接访问http://127.0.0.1:6007/static/tree.jpg时，相当于发起了一个全新的独立请求，浏览器可能会绕过缓存（或者缓存已经过期），所以能拿到最新的图片。

几个实用的解决办法 #

• 给图片URL加动态参数
  这是最简单直接的方案。在页面引用图片时，给URL末尾加上一个随时间变化的参数（比如时间戳、随机数），让浏览器认为每次请求的都是新资源。

  • 如果是后端渲染页面（比如Flask/Django），可以在生成img标签时拼接参数：

    <img src="/static/tree.jpg?v={{ current_timestamp }}" alt="tree">
    

  • 如果是前端JS动态更新图片，可以这样写：

    const imgElement = document.querySelector('#target-img');
    // 用当前时间戳做参数，确保每次URL都不同
    imgElement.src = `/static/tree.jpg?v=${Date.now()}`;
    

• 配置服务器禁用静态资源缓存
  如果你用的是Flask（从端口6007来看大概率是），可以自定义静态文件路由，设置缓存超时为0，强制浏览器每次都请求新资源：

  from flask import Flask, send_from_directory
  
  app = Flask(__name__)
  
  @app.route('/static/<path:filename>')
  def serve_static(filename):
      # cache_timeout=0 告诉浏览器不要缓存该资源
      return send_from_directory('static', filename, cache_timeout=0)
  

  其他后端框架也有类似的缓存配置，核心是给静态资源的响应头加上Cache-Control: no-cache或Cache-Control: max-age=0。

• 前端强制刷新图片资源
  可以通过JS创建新的Image对象预加载新图，加载完成后再替换页面上的旧图，这样还能避免加载时的空白：

  function refreshImage() {
      const newImg = new Image();
      newImg.src = `/static/tree.jpg?v=${Math.random()}`;
      newImg.onload = function() {
          document.querySelector('#target-img').src = newImg.src;
      };
  }
  

验证方法 #

打开浏览器开发者工具（按F12）切换到Network标签，刷新页面后看图片请求的状态码：

• 如果是304（Not Modified），说明浏览器用了缓存；
• 改成上述方案后，应该看到200状态码，并且图片内容是最新的。

内容的提问来源于stack exchange，提问作者user9588242