uni-app 图片显示问题：下载的_doc/xxxxxxxxx/xxxxxx.jpg图片不能在<image src=' '>的src中显示，一片空白，换成绝对路径也不行。

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.4.7
手机系统：Android
手机系统版本号：Android 12
手机厂商：华为
手机机型：华为荣耀9X
页面类型：vue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX

示例代码：

src="_doc/uniapp_save/165335070442851.jpg"    ，不显示  
src= "/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/165335070442851.jpg"  
不显示,  
src= "file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/165335070442851.jpg"  
也不显示，

怎么办？

操作步骤：

savepath="_doc/uniapp_save/165335070442851.jpg"    ，不显示  
<image src='savepath'>  显示空白  
abs_path = plus.io.convertLocalFileSystemURL(savepath)  
<image src='abs_path'>  显示空白  
输出结果："/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/165335070442851.jpg"  
不显示,  
abs_path2= 'file://'+abs_path  
<image src='abs_path2'>  显示空白  
输出结果："file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/165335070442851.jpg"

预期结果：

<image src='xxxpath'>  图片显示正常

实际结果：

<image src='xxxpath'>  显示空白

bug描述：

请问一下 uniapp filesave保存的图片 _doc/…jpg 开头的不能直接显示在的src中，plus.io.convertLocalFileSystemURL换成绝对路径也不显示，比如

_doc/uniapp_save/165335070442851.jpg  
，不显示  
/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/165335070442851.jpg  
不显示，  
file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/165335070442851.jpg  
也不显示，

怎么办？

itying888 1楼•21 天前

你这路径好奇怪啊，怎么没有包名？是不是你路径搞错了啊？

songsunli 2楼•21 天前

我是在基座里运行的，图片是存在的，我进手机看了，图片是确实存在的。

yuanlaile 3楼•21 天前

adb shell 按这个绝对路径能成功下载到这个图片到本地电脑并正常打开是吗？不行发代码出来大家看看？

songsunli 4楼•21 天前

adb shell不知道怎么用啊反正我按这个路径进手机可以看到图片

htzhanglong 5楼•21 天前

在 uni-app 中，图片无法显示的问题可能由多种原因引起。以下是一些可能的原因和解决方法：

1. 路径问题

确保图片路径是正确的。如果图片是动态下载的，确保路径是有效的且图片已经下载成功。

2. 文件系统路径

在 uni-app 中，_doc/ 是文件系统路径，而不是相对路径或绝对路径。<image> 标签的 src 属性不支持直接使用文件系统路径。你需要使用 uni.getFileSystemManager() 来读取文件并转换为 base64 或临时路径。

const fs = uni.getFileSystemManager();
const filePath = '_doc/xxxxxxxxx/xxxxxx.jpg';

// 读取文件并转换为 base64
fs.readFile({
  filePath: filePath,
  encoding: 'base64',
  success(res) {
    const base64Data = 'data:image/jpeg;base64,' + res.data;
    this.imageSrc = base64Data;
  },
  fail(err) {
    console.error('读取文件失败', err);
  }
});

然后在 <image> 标签中使用 imageSrc：

<image :src="imageSrc"></image>

3. 文件权限

确保你有权限访问 _doc/ 目录下的文件。如果你是在某些平台（如微信小程序）上运行，可能需要额外的权限配置。

4. 图片格式

确保图片格式是支持的格式（如 .jpg, .png 等）。

5. 跨平台兼容性

不同平台（如 H5、小程序、App）对文件路径的处理方式可能不同。确保你的代码在所有目标平台上都能正常工作。

6. 调试

使用 console.log 或调试工具检查路径和文件内容，确保文件读取和转换过程没有错误。

7. 临时路径

如果你只是需要显示图片，可以将文件复制到临时路径，然后使用临时路径作为 src。

const fs = uni.getFileSystemManager();
const filePath = '_doc/xxxxxxxxx/xxxxxx.jpg';
const tempFilePath = `${wx.env.USER_DATA_PATH}/temp.jpg`;

fs.copyFile({
  srcPath: filePath,
  destPath: tempFilePath,
  success(res) {
    this.imageSrc = tempFilePath;
  },
  fail(err) {
    console.error('复制文件失败', err);
  }
});

然后在 <image> 标签中使用 imageSrc：

<image :src="imageSrc"></image>