uni-app nvue下 image 组件在iOS和安卓上无法加载 _doc/uniapp-save 目录下的本地图片

uni-app nvue下 image 组件在iOS和安卓上无法加载 _doc/uniapp-save 目录下的本地图片

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 window10
手机系统 全部
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 CLI
CLI版本号 2.0.0-31920210423001

测试过的手机：

  • iphone6
  • 小米6

示例代码：

{
    "type": "error",
    "timeStamp": 1640161751682,
    "target": {
        "id": "",
        "dataset": {},
        "offsetLeft": 0,
        "offsetTop": 0
    },
    "currentTarget": {
        "id": "",
        "dataset": {},
        "offsetLeft": 0,
        "offsetTop": 0
    },
    "detail": {
        "errMsg": "src error"
    },
    "stopPropagation": "function() { [native code] }"
}

操作步骤：

  • 无

预期结果：

  • 无

实际结果：

  • 无

bug描述：

image 中 src="_doc/uniapp_save/16401611958922.png" image 组件直接回调 error 事件


更多关于uni-app nvue下 image 组件在iOS和安卓上无法加载 _doc/uniapp-save 目录下的本地图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

要确保你的图片是否存在 “_doc/uniapp_save/16401611958922.png”
我测试了nvue _doc目录下的图片可以显示

更多关于uni-app nvue下 image 组件在iOS和安卓上无法加载 _doc/uniapp-save 目录下的本地图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 中，_doc 目录是应用私有文档目录，但 image 组件对本地文件路径的支持与 vue 页面有所不同。

核心问题： nvue 的 image 组件在加载本地文件时，需要使用平台绝对路径，而 _doc/ 开头的路径是相对路径，无法直接识别。

解决方案： 你需要使用 plus.io API 将相对路径转换为平台绝对路径。

修改后的代码示例：

<template>
  <view>
    <image :src="imagePath" @error="onImageError"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: ''
    }
  },
  mounted() {
    this.loadLocalImage();
  },
  methods: {
    loadLocalImage() {
      // 获取 _doc/uniapp_save/16401611958922.png 的绝对路径
      const relativePath = '_doc/uniapp_save/16401611958922.png';
      
      // 使用 plus.io 转换路径
      const absolutePath = plus.io.convertLocalFileSystemURL(relativePath);
      
      this.imagePath = absolutePath;
    },
    onImageError(e) {
      console.error('图片加载失败:', e.detail.errMsg);
    }
  }
}
</script>

关键点说明：

  1. plus.io.convertLocalFileSystemURL() 方法将相对路径转换为平台可识别的绝对路径。
  2. 转换后的路径格式：
    • iOS：file:///var/mobile/Containers/.../Documents/uniapp_save/...
    • Android：file:///storage/emulated/0/Android/data/.../files/uniapp_save/...

注意事项：

  • 确保图片文件确实存在于 _doc/uniapp_save/ 目录下
  • 检查文件权限，确保应用有读取该目录的权限
  • 如果图片是通过下载保存的，确保下载已完成且文件完整

替代方案： 如果图片是应用内置的，建议放在 static 目录下，直接使用相对路径：

<image src="/static/image.png"></image>
回到顶部