HarmonyOS Image组件加载缓存文件中的图片问题

Image 组件如何加载沙箱文件夹中的图片呢，直接使用 file://data/storage/el2/base/haps/entry/cache/splash.jpg 不行，必须要使用imageKit转成pixemap吗？

HarmonyOS

superinsect

2024-10-09 12:26:08

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

Image组件不能直接传入应用沙箱路径，需要传入应用沙箱uri。拿到文件的沙箱路径后，通过调用@ohos.file.fileuri模块的fileuri.getUriFromPath(file.path)将沙箱路径转化为沙箱uri，传入之后即可正常显示。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fileuri-V5

demo如下：

import { BusinessError } from '@ohos.base';  
import { picker } from '@kit.CoreFileKit';  
const photoSelectOptions = new picker.PhotoSelectOptions();  
const photoViewPicker = new picker.PhotoViewPicker();  
@Entry  
@Component  
struct Index {  
  @State isShow: boolean = false;  
  @State uri: string = '';  
  build() {  
    Column({ space: 30 }) {  
      Button('选择图片')  
        .width(200)  
        .height(30)  
        .onClick(() => {  
          this.selectedPhoto()  
        })  
      Image(this.uri)  
        .width('95%')  
        .height(400)  
        .padding({top:'30xp'})  
  
    }.height('100%').width('100%')  
  }  
  selectedPhoto() {  
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE  
    photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目  
    photoViewPicker.select(photoSelectOptions).then(async (photoSelectResult: picker.PhotoSelectResult) => {  
      this.uri = photoSelectResult.photoUris[0];  
      console.info('photoViewPicker.select to file succeed and uris are:' + this.uri);  
    }).catch((err: BusinessError) => {  
      console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);  
    })  
  }  
}