鸿蒙UI系统组件13——图片显示(Image)

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。

1、概述

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

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

Image(src: string | Resource | media.PixelMap)

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

2、加载图片资源

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

2.1、存档图类型数据源

存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64，分别介绍如下：

• 本地资源

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

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

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

• 网络资源

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

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

• Resource资源

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

调用方式：

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

另外，图片还可以放在rawfile文件夹下面，例如：

调用方式：

Image($rawfile('snap'))

• 媒体库file://data/storage

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

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

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