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
@Component
struct 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('100%').height('100%')
  }
}

b. 从媒体库获取的url格式通常如下:

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

• base64

路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。

Base64格式字符串可用于存储图片的像素数据，在网页上使用较为广泛。

2.2、多媒体像素图

PixelMap是图片解码后的像素图。以下示例将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上，步骤如下：

step1: 创建PixelMap状态变量。

@State image: PixelMap = undefined;

step2: 引用多媒体。

请求网络图片请求，解码编码PixelMap。

1. 引用网络权限与媒体库权限。

import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';

b. 填写网络图片地址，加载图片数据。

http.createHttp().request("https://www.example.com/xxx.png",
  (error, data) => {
    if (error){
      console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
    } else {
    }
  }
)

c. 将网络地址成功返回的数据，编码转码成pixelMap的图片格式。

let code = data.responseCode;
if (ResponseCode.ResponseCode.OK === code) {
  let res: any = data.result  
  let imageSource = image.createImageSource(res);
  let options = {
    alphaType: 0,                     // 透明度
    editable: false,                  // 是否可编辑
    pixelFormat: 3,                   // 像素格式
    scaleMode: 1,                     // 缩略值
    size: { height: 100, width: 100}
   }  // 创建图片大小
    imageSource.createPixelMap(options).then((pixelMap) => {
    this.image = pixelMap
  })
}

d. 显示图片

Button("获取网络图片")
  .onClick(() => {
    this.httpRequest()
  })
Image(this.image).height(100).width(100)

3、显示矢量图

Image组件可显示矢量图（svg格式的图片），支持的svg标签为：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。

svg格式的图片可以使用fillColor属性改变图片的绘制颜色。

Image($r('app.media.cloud')).width(50)
.fillColor(Color.Blue)

原始图片

设置绘制颜色后的svg图片

3.1、添加属性

给Image组件设置属性可以使图片显示更灵活，达到一些自定义的效果。以下是几个常用属性的使用示例。