在 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 开发的网站中的图片缓存下来,而不至于每次都要刷新。

相关推荐
游戏开发爱好者84 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
Terio_my4 小时前
Spring Boot 缓存与验证码生成
spring boot·spring·缓存
帧栈5 小时前
开发避坑指南(61):Redis持久化失败:RDB快照因磁盘问题无法保存解决方案
数据库·redis·缓存
郑州光合科技余经理5 小时前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
2501_916008896 小时前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
gsfl7 小时前
redis单线程模型
数据库·redis·缓存
ikun778g8 小时前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
青衫旧故11 小时前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app
Terio_my11 小时前
JTCatch 缓存配置与使用
缓存
Terio_my13 小时前
Spring Boot 缓存技术
spring boot·后端·缓存