uni-app uni.saveFile 持久化下载的图片 image src无法显示

uni-app uni.saveFile 持久化下载的图片 image src无法显示

开发环境 版本号 项目创建方式
Windows 11 家庭中文版 23H2 4.57 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS NEXT Developer Preview

手机厂商：华为

手机机型：HUWEI Mate 60

页面类型：vue

vue版本：vue3

打包方式：云端

操作步骤：

uni.downloadFile下载
uni.saveFile持久化
将持久化的路径显示在
<image class="cc-advert-bg" :src="imageUrl" mode="aspectFill"></image>中 显示白屏
我已上架的App 都能正常显示，但是这个4.57就说无法显示


### 预期结果：

正常显示

实际结果：

白屏


### bug描述：

我通过 uni.downloadFile 下载的图片在通过uni.saveFile持久化图片 ，  
让下载的图片显示在界面上  
image src无法显示  显示白屏

更多关于uni-app uni.saveFile 持久化下载的图片 image src无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

您好，方便发个可复现demo吗？以便于更好的排查问题

更多关于uni-app uni.saveFile 持久化下载的图片 image src无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


4.45版本 版本经过测试没有问题

业务逻辑，具体流程如下

首先尝试从缓存中读取上次已下载的闪频广告图片。

若缓存中存在该图片，则直接展示上次下载的闪频广告图片，以快速呈现内容。
若缓存中无对应图片，则展示系统预设的默认闪频广告图片，保证界面的完整性。

发起对服务器端闪频广告图片的下载操作：

成功从服务器下载闪频广告图片后，将其保存至本地缓存中，以便下次优先从缓存中读取，提升加载速度。

测试结果 1、从缓存中获取到路径无法显示 2、根据缓存路径查询文件信息【uni.getSavedFileInfo】获取能查询到但是image 无法显示 2、下载临时图片可显示 3、持久化图片可显示

其他端是否能显示呢，安卓ios/h5/xcx？有试过吗

回复 恭喜n发财: 其它都好的，就鸿蒙不行

回复 恭喜n发财: 而且们正式发布的鸿蒙NEXT App都没有问题，这次改了一些bug在打包 就是白屏

uni.downloadFile({ url: ‘https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png’, success: (res) => { uni.saveFile({ tempFilePath: res.tempFilePath, success: (resp) => { // this.imagePath = resp.savedFilePath uni.getSavedFileList({ complete: (ret) => { uni.showModal({ content: JSON.stringify(ret) }) this.imagePath = ret.fileList[0].filePath } }) } }) } })
我对照写了一个在4.45、4.56、4.64的版本上都是可以显示图片的，升级下最新的版本试下呢？

你这样确实没有问题，你把下载的路径缓存起来，然后关闭App进程，再打开App, onReady 中获取缓存，并且将缓存的本地地址设置到image中，此时就白屏无法显示，必须要setTimeout 一下再赋值给image

简单点：再onReady中给image 赋值一个 下载到本地图片的地址就会失效，必须要延迟

回复 Johnny_new: 复现了，感觉生命周期有些问题

根据描述，这个问题可能是由于HarmonyOS NEXT系统对文件访问权限的调整导致的。以下是可能的原因和解决方案：

  1. 文件路径问题： 在HarmonyOS NEXT上，持久化文件的访问方式可能有变化。建议使用uni.getFileSystemManager().saveFile()保存后，通过uni.getSavedFileList()获取可访问的文件路径。

  2. 权限问题： 尝试在manifest.json中确保已声明文件读写权限：

"app-plus": {
    "permission": [
        "android.permission.READ_EXTERNAL_STORAGE",
        "android.permission.WRITE_EXTERNAL_STORAGE"
    ]
}
  1. 临时解决方案： 可以尝试使用base64方式显示：
uni.getFileSystemManager().readFile({
    filePath: savedFilePath,
    encoding: 'base64',
    success: (res) => {
        this.imageUrl = 'data:image/png;base64,' + res.data
    }
})
  1. 路径转换： 对于持久化文件，尝试使用以下方式转换路径：
plus.io.convertLocalFileSystemURL(savedFilePath)
回到顶部