在 UniApp 开发的网站中使图片能够缓存,不一直刷新

在 UniApp 开发的网站中,要使图片能够缓存,不一直刷新,可以考虑以下几种方法:

1. 使用适当的 HTTP 缓存头

确保你的服务器在响应图片时,返回合适的缓存控制 HTTP 头。以下是一些常用的 HTTP 头来控制缓存:

  • Cache-Control :

    你可以设置 Cache-Control 头为 max-age,指定资源在多久后过期。例如:

javascript 复制代码
Cache-Control: public, max-age=31536000
  • 这表示资源可以被缓存,并在一年内有效。

  • Expires :

    指定一个具体的过期时间。例如:

javascript 复制代码
Expires: Wed, 21 Oct 2025 07:28:00 GMT

2. 通过版本号控制图片

在你的图片 URL 中添加版本信息或时间戳,当你想更新图片时,改变这个版本号。这可以防止浏览器使用旧的缓存。例如:

javascript 复制代码
const imageUrl = `https://example.com/image.png?v=1.0`;

每次更新图片,你只需更改版本号,如 ?v=2.0

3. 使用 uni.request 进行手动缓存

你可以使用 uni.request 请求图片,然后将图片以 Base64 的形式存储在 data 里,这样可以有效利用 Vue 的响应式特性。
*

javascript 复制代码
uni.request({
    url: 'https://example.com/image.png',
    responseType: 'arraybuffer',
    success: (res) => {
        const base64Image = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
        this.imageSrc = base64Image; // 设置图片源为 Base64 格式
    }
});

4. 使用本地存储

如果需要长期缓存图片,可以将图片数据存储到本地,比如使用 localStorage。你可以将图片的 Base64 编码存储到 localStorage 中并在需要时读取。
*

javascript 复制代码
// 存储图片
localStorage.setItem('cachedImage', base64Image);

// 读取图片
const cachedImage = localStorage.getItem('cachedImage');
if (cachedImage) {
    this.imageSrc = cachedImage; // 使用缓存的图片
}

5. 合理设置 <img> 标签的属性

尽量使用图片的 srcalt 属性,让浏览器知道这是一个图片资源,避免使用重定向或其他会导致缓存无效的方式。

总结

通过合理设置服务器的缓存头、使用版本号管理图片、手动请求并缓存图片数据、或者利用本地存储,你可以有效地让 UniApp 开发的网站中的图片缓存下来,而不至于每次都要刷新。

相关推荐
Java初学者小白18 分钟前
秋招Day14 - Redis - 应用
java·数据库·redis·缓存
奈斯ing44 分钟前
【Redis篇】数据库架构演进中Redis缓存的技术必然性—高并发场景下穿透、击穿、雪崩的体系化解决方案
运维·redis·缓存·数据库架构
耶啵奶膘6 小时前
uniapp——地图路线绘制map
uni-app
shadouqi6 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
Java初学者小白7 小时前
秋招Day15 - Redis - 缓存设计
java·数据库·redis·缓存
走,带你去玩7 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤10 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
工一木子14 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
陌殇殇14 小时前
SpringBoot整合SpringCache缓存
spring boot·redis·缓存
某公司摸鱼前端17 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app