鸿蒙开发 添加组件（显示图片 (Image)）

往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

1.嵌入式开发适不适合做鸿蒙南向开发？一文带你了解

2.鸿蒙众多岗位需求突增！该如何选择？

3.分享一场鸿蒙开发岗位面试经历~

4.待更新中……

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.