HarmonyOS Image组件传入沙箱的图片路径，不显示？

Question

Image组件传入沙箱的图片路径不显示。

let uri = fileUri.getUriFromPath(`${item.basePath}`);
console.info("The name of FileUri is " + uri + '/' + item.name);

得到：

\.product/data/storage/el2/base/haps/phone/files/图片1.png

这个路径，然后在Image内展示：

Image('file://com.xxx.h.product/data/storage/el2/base/haps/phone/files/图片1.png')   .width(100)

Answer 1

先创建下路径，再下载图片，点击回显、示例参考如下：

import common from '@ohos.app.ability.common';
import request from '@ohos.request';
import { BusinessError } from '@ohos.base';
import { fileIo as fs, fileUri } from '@kit.CoreFileKit';
import { webview } from '@kit.ArkWeb';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let filesDir = context.filesDir;

@Entry
@Component
export struct PdfPage {
  @State message: string = 'Hello World';
  @State picUrl: string = 'https:xxx';
  private webviewController: WebviewController = new webview.WebviewController();
  @State imageUrl: string = ''

  build() {
    Row() {
      Scroll() {
        Column() {
          Button('显示').onClick(() => {
            let path = filesDir + "/testDir1/testDir2/testDir3/22.jpg";
            let uri = fileUri.getUriFromPath(path);
            this.imageUrl = uri
            // console.info("The uri of FileUri is " + fileUriObject.toString());
          })
          Image(this.imageUrl)
            .height(200)
          Button('1.创建路径').onClick(() => {
            let dirPath = filesDir + "/testDir1/testDir2/testDir3";
            fs.mkdir(dirPath, true).then(() => {
              console.info("mkdir succeed");
            }).catch((err: BusinessError) => {
              console.error("mkdir failed with error message: " + err.message + ", error code: " + err.code);
            });
          })
          Button('2.下载')
            .onClick(() => {
              try {
                //下载文件
                request.downloadFile(context, {
                  url: this.picUrl,
                  filePath: filesDir + "/testDir1/testDir2/testDir3" + '/22.jpg'
                }).then((downloadTask: request.DownloadTask) => {
                  let failCallback = (err: number) => {
                    console.error(`Failed to download the task. Code: ${err}`);
                  };
                  downloadTask.on('fail', failCallback);
                  //开启回调
                  downloadTask.on('complete', () => {
                    console.info('downloadTask1 complete====');
                  })
                  // downloadTask.off('fail');
                }).catch((err: BusinessError) => {
                  console.error(`Invoke downloadTask failed-----, code is ${err.code}, message is ${err.message}`);
                });
              } catch (error) {
                let err: BusinessError = error as BusinessError;
                console.error(`Invoke downloadTask downloadFile failed====, code is ${err.code}, message is ${err.message}`);
              }
            })
            .width('100%')
        }
      }
      .height('100%')
    }
  }
}