鸿蒙Next Image加载沙箱中的图片未显示

鸿蒙Next Image加载沙箱中的图片未显示

【设备信息】Mate60

【API版本】Api12

【DevEco Studio版本】5.0.3.910

【问题描述】我在沙箱中下载了一张图片, 路径如下, 且通过Device File Browser查看了此文件存在, 但是我通过Image(此沙箱图片的路径, 未显示, 请问沙箱中的图片是怎么通过Image加载出来的
4 回复

通过调用@ohos.file.fileuri模块的fileuri.getUriFromPath(file.path)将沙箱路径转化为沙箱uri，就可以加载出来了。 示例代码如下：

import fileUri from '@ohos.file.fileuri';
import common from '@ohos.app.ability.common';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State uri: string = ""

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            let context = getContext(this) as common.UIAbilityContext
            let filePath = context.filesDir + "/IM/icon.png"
            console.log('filePath-----',filePath)
            this.uri = fileUri.getUriFromPath(filePath)
            console.log('uri-----',this.uri)
          })
        Image(this.uri)
          .width(100)
          .height(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于鸿蒙Next Image加载沙箱中的图片未显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


此沙箱图片的路径 你是怎么写的放出来看看

Image组件是不能直接加载沙箱路径的，需要将路径转换为url，具体方法是

let uri = fileUri.getUriFromPath(path);

详情见文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-file-fileuri

鸿蒙Next中，如果在沙箱中加载图片未显示，可能的原因包括路径错误、权限问题或图片格式不支持。确认图片路径是否正确，确保路径指向沙箱内的正确位置。检查应用的权限设置，确保有读取沙箱内文件的权限。此外，鸿蒙Next支持的图片格式有限，确认图片格式是否在支持列表中。如果以上均无问题，可能是缓存或渲染问题，尝试清除缓存或重启应用。

回到顶部