小程序图片缓存问题:时间戳和版本号解决图片不更新

在小程序开发中,经常会遇到这样的情况:

服务器上的图片已经更新了,但是页面上显示的还是旧图片。

这种情况很多时候是因为图片 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 同时发生变化,让客户端重新获取最新图片。

相关推荐
MoonMoonLee7 天前
小程序配置
小程序
全栈弄潮儿²⁰²⁴7 天前
AI Agent 开发实战(30):限流、缓存与成本控制
人工智能·gpt·缓存·agent·限流·agi·成本控制
2501_916007477 天前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
JQweryuiop7 天前
中小型游戏陪练工作室数字化管理实践:基于七彩屋电竞护航小程序订单、履约与绩效系统的落地复盘
大数据·游戏·小程序·架构
Ai-_Man7 天前
您您这可以把Mistral AI的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。
人工智能·ai·小程序·电脑
志尊宝7 天前
Vue3 零基础每日笔记(055):组件里正确使用 store——storeToRefs 解构与 $patch 批量修改
笔记·vue·html·前端开发·软件开发
yzy857 天前
Vue中下载或打开文件的JavaScript方法
前端·javascript·vue
2501_916008897 天前
如何实现iOS App代码混淆:SwiftShield使用指南
android·ios·小程序·https·uni-app·iphone·webview
微擎应用市场7 天前
简单拼车小程序系统:实现出行与物流资源的高效精准匹配
小程序
2501_916008897 天前
怎么用 Godot 导出 iOS 应用并上架 App Store?签名字段该填什么?
android·ios·小程序·https·uni-app·iphone·webview