你有没有遇到过这种情况：明明已经上传了新头像，网页刷新好几遍还是显示旧的？或者设计师同事说“图已经换了”，你这边看的却是上个版本？很多人第一反应就是——是不是缓存搞的鬼？
缓存确实是常见元凶
浏览器为了加快页面加载速度，会把之前访问过的资源存一份在本地，比如图片、CSS、JS 文件。当你再次打开同一个页面时，浏览器优先从本地读取这些文件，而不是重新去服务器下载。这个机制叫“缓存”，它确实会导致你看到的是旧版图片。
举个例子：你公司官网更新了产品配图，但老客户打开还是看到老款设备的照片。他们可能会疑惑：“你们还在卖这个？” 其实不是网站没更新，而是他们的浏览器拿着“旧存折”在看新页面。
怎么判断是不是缓存问题？
最简单的办法是强制刷新。Windows 上按 Ctrl + F5，Mac 上是 Cmd + Shift + R。这样浏览器会忽略本地缓存，直接从服务器拉取最新资源。如果这时候图片变了，那基本可以确定是缓存惹的祸。
另一个方法是打开开发者工具（F12），切换到 Network 标签，勾选 “Disable cache”（禁用缓存）。然后再刷新页面，看看图片是否更新。
但也不是所有“旧图”都怪缓存
有时候锅不在浏览器。比如 CDN（内容分发网络）也可能缓存图片。网站后台改了图，但 CDN 节点还没同步，用户从不同地区访问可能拿到的是不同版本。这种情况需要管理员手动清除 CDN 缓存。
还有一种情况是图片链接根本没变。比如系统用的是 avatar.jpg 这个文件名，你覆盖上传新图，但文件名不变。有些服务器和 CDN 会认为“名字一样就是同一个文件”，继续返回旧内容。解决办法是在 URL 后加个版本号或时间戳：
<img src="avatar.jpg?v=20240405" alt="头像">这样浏览器和 CDN 都会当成一个新资源去请求，自然就能拿到最新的图。
开发时的小技巧
如果你自己做网页，可以在构建流程中自动给静态资源加哈希值。比如 Webpack 打包后生成 avatar.a1b2c3d.jpg，每次内容变化，文件名也会变，彻底避开缓存问题。
对于普通用户来说，清缓存不是唯一出路。试试无痕模式打开页面，或者换个设备看看。如果别人都能看到新图，只有你看不到，那大概率是你这边“存太深”了。
下次再遇到图片不更新，先别急着怀疑网络或服务器，想想是不是本地留着“回忆”不肯删。