uni-app iOS APP保存的图片不能在image标签显示出来

uni-app iOS APP保存的图片不能在image标签显示出来

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.7.1
HBuilderX类型 正式
HBuilderX版本号 4.36
手机系统 iOS
手机系统版本号 iOS 17
手机厂商 苹果
手机机型 iPhone12
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  1. 使用iOS 离线SDK打包应用，改变调试开关(<!-- debug="true" syncDebug="true" -->)
  2. 在插件中保存图片到应用的Documents或Library目录，返回图片绝对目录到页面
  3. 在View页面使用image显示图片

预期结果：

  • 插件返回的图片绝对目录可以显示在标签中
  • 或者
  • 有方案可以判断当前是否调试模式

实际结果：

  • 使用/.../Library目录保存图片不能在开发环境显示，使用/.../Documents目录保存图片不能在线上环境显示
  • 目前只能要频繁手动修改调试开关，来适配开发和发布环境

bug描述：

问题是这样的，在APP的原生插件中有保存图片传给vue页面，开发调试环境图片保存和显示都没有问题，发布到线上后图片不能正常显示，但是可以正常预览（uni.previewImage）和获取到图片信息（uni.getImageInfo）。

后面通过排查定位发现和基座的调试开关有关， 打开调试开关(开发)文件需要保存到 /.../Documents/Pandora/apps/{APPID}/doc/xxxx.jpeg， 关闭调试开关(线上)文件需要保存到 /.../Library/Pandora/apps/{APPID}/doc/xxxx.jpeg

通过自带的图片选择器(uni.chooseImage)返回的相对目录_doc/xxx.jpeg 转成绝对目录和上面前缀目录也是一致的

所以在插件中如何适配不同环境保存文件路径问题，或者有方法可以判断当前是否调试模式

（APP自用插件没有上架）


更多关于uni-app iOS APP保存的图片不能在image标签显示出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

UP UP

更多关于uni-app iOS APP保存的图片不能在image标签显示出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在开发uni-app应用时，如果遇到iOS设备上保存的图片无法在<image>标签中显示的问题，通常可能是由几个常见原因引起的，例如路径问题、权限问题或图片存储方式不当。以下是一些可能的解决方案和代码示例，帮助你排查和解决问题。

1. 确认图片路径正确

确保你保存图片的路径与在<image>标签中引用的路径一致。如果图片保存在应用的本地文件系统，你需要使用正确的文件路径。

示例代码：

<template>
  <view>
    <image :src="imagePath" style="width: 100px; height: 100px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: ''
    };
  },
  mounted() {
    this.saveAndDisplayImage();
  },
  methods: {
    saveAndDisplayImage() {
      const fs = uni.getFileSystemManager();
      const tempFilePath = 'path/to/temp/image.png'; // 临时图片路径
      const saveFilePath = `${uni.env.USER_DATA_PATH}/saved_image.png`;

      fs.copyFile({
        srcPath: tempFilePath,
        destPath: saveFilePath,
        success: (res) => {
          this.imagePath = res.destPath;
          console.log('Image saved and path set:', this.imagePath);
        },
        fail: (err) => {
          console.error('Failed to save image:', err);
        }
      });
    }
  }
};
</script>

2. 检查文件系统权限

在iOS上，应用需要适当的文件系统权限才能访问和保存文件。确保你的应用已经请求并获得了必要的权限。

注意： 在uni-app中，通常不需要手动处理iOS的文件系统权限请求，但如果你使用了原生模块或插件，可能需要额外配置。

3. 使用Base64编码

如果图片不大，可以考虑将图片转换为Base64编码字符串，直接在<image>标签的src属性中使用。

示例代码：

uni.getFileSystemManager().readFile({
  filePath: 'path/to/your/image.png',
  encoding: 'base64',
  success: (res) => {
    this.imagePath = `data:image/png;base64,${res.data}`;
  },
  fail: (err) => {
    console.error('Failed to read image:', err);
  }
});

4. 清理缓存和重启应用

有时候，简单的清理应用缓存或重启应用可以解决图片显示问题。

确保在开发和测试过程中，仔细检查和验证每一步，以便准确定位问题所在。如果以上方法仍然无法解决问题，建议检查uni-app的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部