在小程序开发中,经常会遇到这样的情况:
服务器上的图片已经更新了,但是页面上显示的还是旧图片。
这种情况很多时候是因为图片 URL 没有发生变化,客户端继续使用了之前缓存的图片。
常见的解决方式有两种:添加时间戳 和添加版本号。
一、添加时间戳
最简单的方法是在图片 URL 后面加上当前时间戳。
const imageUrl = `${url}?t=${Date.now()}`
例如:
https://example.com/avatar.png?t=1757200000000
下一次刷新:
https://example.com/avatar.png?t=1757200100000
由于每次生成的 URL 都不一样,客户端会重新请求图片,从而获取最新内容。
这种方式比较适合:
用户上传头像
图片刚更新,需要立即刷新
二、添加版本号
另一种方式是给图片增加版本号。
例如:
https://example.com/avatar.png?v=1
图片更新后:
https://example.com/avatar.png?v=2
前端可以这样处理:
const imageUrl = `${url}?v=${version}`
版本号可以由后端维护,例如:
{
"url": "https://example.com/avatar.png",
"version": 2
}
图片没有更新时一直使用:
avatar.png?v=2
只有图片更新后才改成:
avatar.png?v=3
三、两种方式怎么选?
时间戳:
`${url}?t=${Date.now()}`
优点是简单直接,每次都能强制刷新。
版本号:
`${url}?v=${version}`
优点是可以继续利用缓存,图片更新时再改变 URL。
因此,在实际项目中:
临时刷新图片可以使用时间戳,正式项目比较推荐使用版本号。
总结
小程序图片缓存导致图片更新不及时时,可以通过改变图片 URL 来解决。
时间戳:
image.png?t=时间
版本号:
image.png?v=版本号
核心思路就是让图片内容更新后,图片 URL 同时发生变化,让客户端重新获取最新图片。