使用Kingfisher如何缓存同URL对应的更新后新图片？

我太懂这种纠结了——既想靠缓存省带宽、加速加载，又不想用户每次看到的都是旧图，强制刷新完全是丢了缓存的优势，得不偿失。给你几个实用的方案，按需选：

1. URL指纹/版本号（最推荐，简单粗暴见效快） #

核心思路是给图片URL加个动态参数，让浏览器把更新后的图片当成新资源缓存，同时保留旧资源的缓存（但不会再被调用）。比如：

• 旧URL：/assets/product.jpg
• 更新后URL：/assets/product.jpg?v=2（或者用文件内容哈希值?hash=abc123，哈希值可自动从图片文件生成）

每次替换图片时，只要更新这个参数值就行。前端框架里可以把版本号存在状态或配置文件里；用Webpack/Vite这类构建工具的话，打包时会自动给静态资源加哈希后缀，完全不用手动修改。

2. 配置HTTP缓存控制头（精细控制缓存生命周期） #

如果不想改URL，就通过服务端设置缓存策略，让浏览器在缓存到期后先去服务器验证资源是否更新：

• 设置Cache-Control: max-age=86400, must-revalidate：意思是浏览器可以缓存1天，到期后必须向服务器确认资源是否变化
• 配合ETag或Last-Modified响应头：服务端给每个图片生成唯一的ETag（比如文件内容的MD5哈希），浏览器下次请求时会带上If-None-Match头，服务端对比ETag：
  • 如果相同，返回304 Not Modified，浏览器直接用缓存
  • 如果不同，返回新图片和新ETag，浏览器更新缓存

举个Nginx配置的例子：

location ~* \.(jpg|jpeg|png)$ {
    expires 1d;
    add_header Cache-Control "public, must-revalidate";
    add_header ETag $file_md5;
}

3. 前端主动校验（适合需要即时更新的场景） #

如果需要在用户不刷新页面的情况下拿到新图，可以用JS主动校验：

// 预加载新图，带时间戳避免缓存
const checkNewImage = async (url) => {
  const newUrl = `${url}?t=${Date.now()}`;
  const img = new Image();
  await new Promise((resolve, reject) => {
    img.onload = resolve;
    img.onerror = reject;
    img.src = newUrl;
  });
  // 校验成功后替换页面上的图片
  document.querySelector('#target-img').src = newUrl;
};

这个方法适合后台更新图片后，前端需要实时同步的场景，但会多一次请求，最好结合上面的缓存策略一起用。

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