uni-app nvue image组件不会缓存图片导致图床cdn尿崩

测试过的手机：

红米 note8 荣耀20 OPPOa91 iphone13

示例代码：

<list>
<view>
<image :src="https://www.xxxxxx.com/xxxxx.png" style="width:120upx;height:120upx;"></image>
</view>
</list>

操作步骤：

nvue image组件不会缓存图片，导致图床cdn尿崩，list组件的回收机制导致image会不停的在销毁和渲染之间徘徊，每次渲染image图片都会重新请求一遍网络资源，导致图传的cdn流量飞速消耗，我曾试过插件市场的图片缓存插件，但是在安卓上差强人意，确实流量问题得到了缓解，但是无数的uni.downloadFile导致页面异常的卡顿，还有就是软件整包更新之后下载到本地的文件会被删掉，再每次加上一个判断本地文件是否存在的过程安卓中低端机更卡了

预期结果：

nvue image组件可以缓存图片进行cdn节流或者给出不影响性能的解决办法

实际结果：

看上文

bug描述：


### 项目信息表

| 项目信息       | 值          |
|----------------|--------------|
| 产品分类       | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | win11        |
| HBuilderX类型  | 正式         |
| HBuilderX版本号 | 3.6.17       |
| 手机系统       | 全部         |
| 手机厂商       | 华为         |
| 页面类型       | nvue         |
| vue版本        | vue2         |
| 打包方式       | 云端         |
| 项目创建方式   | HBuilderX    |

更多关于uni-app nvue image组件不会缓存图片导致图床cdn尿崩的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

希望官方能够回复一下，我看这个社区活跃度不是很高啊，群里发了也没人理

更多关于uni-app nvue image组件不会缓存图片导致图床cdn尿崩的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 2楼

请求怎么解决这个问题？

songsunli 3楼

在处理 uni-app 中 nvue 的 image 组件不缓存图片的问题时，我们可以通过一些技术手段来优化图片的加载和缓存，以减轻 CDN 的压力。由于 nvue 是基于 Weex 引擎的，其处理图片缓存的方式与常规的 H5 页面有所不同。下面是一个基本的示例，展示了如何在 nvue 中实现图片缓存。

解决方案：使用本地文件系统缓存图片

使用 uni.getFileSystemManager() 读取和保存图片

uni.getFileSystemManager() 提供了对文件系统的访问，可以用来读取网络图片并保存到本地，从而实现缓存。

// 在页面的 script 部分
const fs = uni.getFileSystemManager();
const CACHE_DIR = `${uni.env.USER_DATA_PATH}/cache/`;

function cacheImage(url, callback) {
    const cachedFilePath = `${CACHE_DIR}${new Date().getTime()}_${url.split('/').pop()}`;
    
    // 检查文件是否存在
    fs.access({
        path: cachedFilePath,
        success: () => {
            // 文件存在，直接回调
            callback(cachedFilePath);
        },
        fail: () => {
            // 文件不存在，下载并保存
            const task = fs.downloadFile({
                url: url,
                filePath: cachedFilePath,
                success: res => {
                    if (res.statusCode === 200) {
                        callback(cachedFilePath);
                    } else {
                        console.error('Failed to download image:', res.statusCode);
                    }
                },
                fail: err => {
                    console.error('Download failed:', err);
                }
            });

            task.onProgressUpdate((res) => {
                console.log('Download progress:', res.progress);
            });
        }
    });
}

// 使用缓存函数加载图片
export default {
    data() {
        return {
            cachedImageUrl: ''
        };
    },
    onLoad() {
        const imageUrl = 'https://example.com/path/to/image.jpg';
        cacheImage(imageUrl, cachedPath => {
            this.cachedImageUrl = cachedPath;
        });
    }
};

在 nvue 模板中使用缓存后的图片

<!-- 在页面的 template 部分 -->
<template>
    <div>
        <image :src="cachedImageUrl" style="width: 100%; height: auto;"></image>
    </div>
</template>

注意事项

确保应用有写入存储的权限。
缓存目录和文件名可以根据实际需求进行调整，以避免文件名冲突。
可以考虑实现更复杂的缓存策略，如根据 HTTP 响应头中的 Cache-Control 或 Expires 字段来决定是否使用缓存。
清理过期或不再需要的缓存文件，以避免占用过多存储空间。

通过上述方法，你可以有效地在 uni-app 的 nvue 页面中实现图片缓存，从而减轻 CDN 的压力。

uni-app nvue image组件不会缓存图片 导致图床cdn尿崩