HarmonyOS鸿蒙Next中ArkUI用Image标签显示沙箱中的图片文件

HarmonyOS鸿蒙Next中ArkUI用Image标签显示沙箱中的图片文件 近期做一个本地化应用，需要从手机图库中选取图片，再将图片copy到沙箱目录下临时存储。由于图片不是在项目中resources下的 app.media 之类的目录之下，所以直接用Image($r(‘app.media.文件名’))来显示图片是不行的。

要如何才能正确显示图片呢？这类图片的 uri 将是下面这个样子的：

file://${BUNDLE_NAME}${pathDir}/${imgName}

uri 主要分为4部分

  1. 协议头: file://
  2. 项目包名: com.tom.test
  3. 沙箱路径: pathDir 这个路径基本是在 EntryAbility.ets 中从 this.context.filesDir 获取的
  4. 文件名: imgName

正确组成了上面的图片 uri 之后，我们就可以用Image标签来显示图片了，当然和普通放在项目 resources 目录下面的图片的使用方法有点小小的区别，如下：

  1. 存放于resources目录下的图片 Image($r(‘app.media.test’))
  2. 存放于沙箱目录中的图片 Image(uri)

区别就是一个用**$r** 与不用。

希望对大家有所帮助，少走弯路！！！


更多关于HarmonyOS鸿蒙Next中ArkUI用Image标签显示沙箱中的图片文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，使用ArkUI的Image标签显示沙箱图片文件，需通过mediaLibrary或fileIO API获取沙箱路径。使用Image组件时，设置src属性为沙箱内图片的本地路径，如Image($r('app.media.sandboxImage'))或直接使用文件路径字符串。确保应用已获取必要的存储权限。

更多关于HarmonyOS鸿蒙Next中ArkUI用Image标签显示沙箱中的图片文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，通过Image组件显示沙箱内的图片文件时，直接使用文件URI是正确的方式。根据您的描述，构建的URI格式为file://${BUNDLE_NAME}${pathDir}/${imgName}，其中pathDir来自this.context.filesDir获取的沙箱路径。

示例代码：

Image(uri)
  .width(100)
  .height(100)

这种方式适用于动态存储的图片，无需通过$r引用资源。确保路径拼接准确，且应用具有相应的文件访问权限即可正常显示。

回到顶部