Flask中如何实现图片缓存？避免页面切换重复加载图片

不用折腾localStorage写代码，直接通过服务器配置静态资源的缓存头就能搞定，不同服务器/托管环境的设置方法如下：

1. Nginx环境配置 #

找到Nginx的站点配置文件（比如nginx.conf或站点专属配置），在处理静态资源的location块中添加缓存规则：

location ~* \.(png|jpg|jpeg|gif|webp)$ {
    expires 30d;  # 设置缓存有效期为30天，可按需调整时长
    add_header Cache-Control "public, max-age=2592000";  # max-age单位为秒，30天对应2592000秒
}

配置完成后重启Nginx即可生效。

2. Node.js（Express框架）配置 #

用express.static托管静态资源时，直接在配置里添加缓存规则：

const express = require('express');
const app = express();

// 给图片类资源设置缓存，maxAge单位为毫秒，30天对应30*24*60*60*1000
app.use(express.static('public', {
    setHeaders: (res, path) => {
        if (path.match(/\.(png|jpg|jpeg|gif|webp)$/)) {
            res.setHeader('Cache-Control', 'public, max-age=2592000');
        }
    }
}));

3. 静态站点托管平台（Vercel/Netlify）配置 #

这类平台支持通过配置文件设置缓存头：

• Vercel：在项目根目录创建vercel.json：

{
  "headers": [
    {
      "source": "/(.*\\.(png|jpg|jpeg|gif|webp))",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=2592000"
        }
      ]
    }
  ]
}

• Netlify：创建netlify.toml：

[[headers]]
  for = "/*.(png|jpg|jpeg|gif|webp)"
  [headers.values]
    Cache-Control = "public, max-age=2592000"

关键注意点 #

• 别用Cache-Control: no-cache，这个规则是让浏览器每次都要向服务器验证资源是否更新，并非真正缓存静态资源；推荐用public, max-age=xxx，如果图片确定不会更新，还可以加上immutable进一步优化缓存效率。
• 如果后续需要更新图片，建议给文件名加版本标识（比如logo-v2.png），这样浏览器会自动请求新资源，不会复用旧缓存。

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