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

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

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

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

相关推荐
Chenyu_3107 小时前
DPDK、TC 和 XDP:Linux 高性能网络到底在优化什么
linux·服务器·网络·缓存
那年那棵树14 小时前
基于WebGis的人生如旅地图系统
前端·arcgis·vue·课程设计
万岳科技程序员小金20 小时前
直播电商带货系统源码、小程序/APP开发:平台搭建方案全面解析
小程序·私域直播小程序·私域直播软件开发·私域直播app·直播电商系统源码·直播电商平台搭建
hflmwl820 小时前
RedisDesktopManager安装包中文版官方下载,redis可视化客户端工具下载
数据库·redis·缓存·可视化客户端工具
一枕槐安48720 小时前
大模型应用后端设计:上下文管理、缓存、降级策略的工程方案总结
java·spring·缓存
梦想平凡20 小时前
棋牌游戏技术实战(十三):缓存对局历史时控制容量,命中以后仍然检查成员权限
游戏·缓存
我不会起名字3221 天前
Redis 从 0 到 1(十一):缓存穿透/击穿/雪崩三连击,Go 3 套防御代码
redis·缓存·go·布隆过滤器·雪崩
Chenyu_3101 天前
NUMA 基础:从 CPU、内存到 Node 的整体理解
linux·服务器·网络·缓存
土豆.exe1 天前
nf_tables 的 verdict 被读了两次:一个十年未闭合的位域错配
java·数据库·网络安全·缓存
hweiyu002 天前
Redis命令:LMOVE
redis·缓存