HarmonyOS NEXT实战开发：显示图片 (Image)

开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。

Image通过调用接口来创建，接口调用形式如下：

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。

加载图片资源

Image支持加载存档图、多媒体像素图两种类型。

存档图类型数据源

存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64。

• 本地资源

  创建文件夹，将本地图片放入ets文件夹下的任意位置。

  Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

  Image('images/view.jpg')
  .width(200)

• 网络资源

  引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考声明权限。此时，Image组件的src参数为网络图片的链接。

  Image组件首次加载网络图片时，需要请求网络资源，非首次加载时，默认从缓存中直接读取图片，更多图片缓存设置请参考setImageCacheCount、setImageRawDataCacheSize、setImageFileCacheSize。

  Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址

• Resource资源

  使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读 取到并转换到Resource格式。

  图1 resources

  

  调用方式：

  Image($r('app.media.icon'))

  还可以将图片放在rawfile文件夹下。

  图2 rawfile

  

  调用方式：

  Image($rawfile('example1.png'))

• 媒体库file://data/storage

  支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。

  1. 调用接口获取图库的照片url。

     import { picker } from '@kit.CoreFileKit';
     import { BusinessError } from '@kit.BasicServicesKit';
     
     @Entry
     @Component
     struct Index {
       @State imgDatas: string[] = [];
       // 获取照片url集
       getAllImg() {
         try {
           let PhotoSelectOptions:picker.PhotoSelectOptions = new picker.PhotoSelectOptions();
           PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
           PhotoSelectOptions.maxSelectNumber = 5;
           let photoPicker:picker.PhotoViewPicker = new picker.PhotoViewPicker();
           photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult:picker.PhotoSelectResult) => {
             this.imgDatas = PhotoSelectResult.photoUris;
             console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
           }).catch((err:Error) => {
             let message = (err as BusinessError).message;
             let code = (err as BusinessError).code;
             console.error(`PhotoViewPicker.select failed with. Code: ${code}, message: ${message}`);
           });
         } catch (err) {
           let message = (err as BusinessError).message;
           let code = (err as BusinessError).code;
           console.error(`PhotoViewPicker failed with. Code: ${code}, message: ${message}`);    }
       }
     
       // aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中
       async aboutToAppear() {
         this.getAllImg();
       }
       // 使用imgDatas的url加载图片。
       build() {
         Column() {
           Grid() {
             ForEach(this.imgDatas, (item:string) => {
               GridItem() {
                 Image(item)
                   .width(200)
               }
             }, (item:string):string => JSON.stringify(item))
           }
         }.width('100%').height('100%')
       }
     }

1. 从媒体库获取的url格式通常如下。

   Image('file://media/Photos/5')
   .width(200)