HarmonyOS 鸿蒙Next ArkTS 服务卡片（Stage模型）中，如何使用Image加载沙盒目录的图片文件？

在应用中，直接通过 fileUri.getUriFromPath 是可以展示沙箱路径下图片的。

但是在卡片中，直接给 image 赋值图片的沙箱路径，图片时不能展示的，需要在创建卡片式，读取出沙箱中图片文件的 fd，然后传给卡片，进行展示，可以参考下面代码：

EntryFormAbility.ets：

import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { fileIo } from '@kit.CoreFileKit';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want): formBindingData.FormBindingData {
    // 沙箱路径下，放一个 test.png
    let imgMap: Record<string, number> = {};
    try {
      // 打开本地图片并获取其打开后的 fd
      let file = fileIo.openSync(this.context.filesDir + '/test.png');
      imgMap['imgBear'] = file.fd;
    } catch (e) {
      console.error(`openSync failed: ${JSON.stringify(e as BusinessError)}`);
    }

    class FormDataClass {
      text: string = 'Image: Bear';
      loaded: boolean = true;
      // 卡片需要显示图片场景, 必须和下列字段 formImages 中的 key 'imgBear' 相同。
      imgName: string = 'imgBear';
      // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), 'imgBear' 对应 fd
      formImages: Record<string, number> = imgMap;
    }

    let formData = new FormDataClass();
    // 将 fd 封装在 formData 中并返回至卡片页面
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId: string) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
  }

  onUpdateForm(formId: string) {
    // Called to notify the form provider to update a specified form.
  }

  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
  }

  onRemoveForm(formId: string) {
    // Called to notify the form provider that a specified form has been destroyed.
  }

  onAcquireFormState(want: Want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }
};

WidgetCard.ets：

let storageWidgetImageUpdate = new LocalStorage();

@Entry(storageWidgetImageUpdate)
@Component
struct WidgetImageUpdateCard {
  @LocalStorageProp('text') text: ResourceStr = $r('app.string.widget_desc');
  @LocalStorageProp('loaded') loaded: boolean = false;
  @LocalStorageProp('imgName') imgName: ResourceStr = $r('app.string.widget_desc');

  build() {
    Column() {
      Column() {
        Text(this.text)
          .fontColor('#FFFFFF')
          .opacity(0.9)
          .fontSize(12)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
          .margin({ top: '8%', left: '10%' })
      }.width('100%').height('30%')
      .alignItems(HorizontalAlign.Start)

      // 展示图片，获取缓存中的图片
      Image(this.loaded ? 'memory://' + this.imgName : $r('app.media.startIcon'))
        .width('100%')
        .height('70%')
    }
    .width('100%').height('100%')
    .backgroundColor(Color.Gray)
  }
}

在沙箱文件中放一个 test.png，卡片的 image 标签就可以正常展示了。

上面代码参考了官网链接“刷新本地图片和网络图片（https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-ui-widget-image-update-V5”）中本地图片章节，代码稍微改动，演变出来的。