鸿蒙应用开发从入门到实战（十）：ArkUI图片组件Image

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！

ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解Image图片组件的使用。

一、Image图片组件

1.1 概述

​ Image为图片组件，用于在应用中显示图片。

1.2 图片参数

​ Image组件的参数类型为string | Resource | media.PixelMap，下面对三种参数类型逐一进行介绍。

1.2.1 string类型

string类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。

• 本地图片

Image('images/demo.jpg')

​ 注意：使用这种方式引入本地图片，需要将图片置于ets目录下，并且需要为Image组件提供图片相对于ets目录的路径。

• 网络图片

Image('http://xxx/xxx.jpg')

​ **注意：**真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。权限配置相关的内容在后续章节会系统介绍。

1.2.2 Resource类型

​ Resource类型的参数用于引入 resources 目录下的图片。

​ resources目录用于统一存放应用所需的各种资源，包括图片、音频、视频、文本等等。下面简要介绍 resources 目录的用法，首先需要了解 resources 的目录结构，如下

​ resources 目录下，用于存放资源的子目录有（element、media、profile）和rawfile。下面分别介绍：

（1）element、media、profile

（element、media、profile）可存在多种版本，用于适配不同的环境，例如语言环境（zh_CN和en_US）、系统主题（dark和light）、设备类型（phone 和 tablet） 等等。我们可以为上述每种环境各自准备一套资源文件，每种环境对应 resources 下的一个目录，例如上述的 zh_CN 和 en_US。我们在使用resources下的资源时，无需指定具体的环境版本，系统会根据设备所处的环境自动选择匹配的版本，例如当设备系统语言为中文时，则会使用zh_CN目录下的资源，为英文时，则会使用en_US目录下的资源。若没有与当前所处环境相对应的版本，则使用 base 目录下资源**。**

各目录存储的具体资源如下

• media

存放媒体资源，包括图片、音频、视频等文件。

• element

存放用于描述页面元素的尺寸、颜色、样式等的各种类型的值，每种类型的值都定义在一个相应的 JSON 文件中。

• profile

存放自定义配置文件。

（2）rawfile

​ 用于存储任意格式的原始文件，需要注意的是rawfile不会根据设备所处的环境去匹配不同的资源。

总结：

​ resources目录下可用于存放图片的目录有**resources/*/**media 以及 **resources/**rawfile，两个目录下图片的使用方式有所不同，下面逐一介绍

• media目录

  该目录下的资源，需要使用$r('app.media.<filename>')的方式引用。

  注意：无需指定具体版本，系统会自动根据所处环境选择相应版本

  例如上图中的img.png图片，可通过$r('app.media.img')引用。需要注意的是$r()的返回值即为 Resource 类型，因此可以直接将$r('app.media.img')作为 Image 组件的参数，例如Image($r('app.media.img'))。

• rawfile目录

  该目录下的资源，可通过$rawfile('path/to/your/file')的方式引用，文件的路径为相对于 rawfile 的路径。例如上图中的icon.png，须使用$rawfile('icon.png)引用。需要注意的是，$rawfile()的返回值也是Resource类型，因此其也可以直接作为 Image 组件的参数，如Image($rawfile('icon.png))。

1.2.3 media.PixelMap

PixelMap指的是图片的像素位图，其通常是一个二维数组，数组中的每个元素对应着图片中的一个像素，其包含了该像素的颜色等信息。像素位图主要用于图片编辑的场景。

示例代码：

​ 在pages目录下新建component目录，通过并把对应的代码放到对应的组件目录下。新建image目录，在该目录下创建ImageParamenter.ets和images目录。

​ 素材准备：将img_phone.png拷贝到images目录，将img_harmony.png拷贝到resources/base/media目录下，将img_phone.png拷贝到rawfile目录下。

​ ImageParamenter.ets代码

@Entry
@Component
// 图片参数
struct ImageParamenter {
   
   

  build() {
   
   
    Column({
   
    space: 40 }) {
   
   
      // 1、string类型
      //本地图片,位于ets目录
      Image('pages/component/image/images/img_phone.png')
        .width(150)
        .height(150)

      //网络图片
      Image('https://developer.harmonyos.com/resource/image/new/home/img_DLP_jiazhi_2.png')
        .width(150)
        .height(150)

      // 2、Resource类型
      //本地图片,位于resource/*/media目录
      Image($r('app.media.img_harmony'))
        .width(150)
        .height(150)

      //本地图片,位于resource/rawfile目录
      Image($rawfile('img_phone.png'))
        .width(150)
        .height(150)

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.3 常用属性

1.3.1 图片