【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Image图片组件

概述

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

参数

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

---

● string类型

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

本地图片

Image('images/demo.jpg')

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

网络图片

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

注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。

---

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

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

resources 目录的用法，首先需要了解resources的目录结构，如下

resources 目录下，用于存放资源的子目录有（element、media、profile）和rawfile。
下面分别介绍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

存放自定义配置文件。

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))。

---

media.PixelMap

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

---

常用属性

图片尺寸
图片尺寸可通过width()方法和height()方法进行设置。例如

Image($r('app.media.img'))
	.width(100)
	.height(100)

两个方法可接收的参数类型均为string | number | Resource

下面对三种参数类型逐一进行介绍。

● string类型

string类型的参数可为百分比，例如'100%'，或者为具体尺寸，例如'100px'。

具体尺寸的单位，常用的有两个，分别是px和vp

● number类型

number类型的参数，默认以vp作为单位。

● Resource类型

Resource类型参数用于引用resources下的element目录中定义的数值。

引用element目录中的数值，同样需要使用$r()函数。要了解具体语法，需要先熟悉element目录下的文件内容。

前文提到过，element目录中可保存各种类型的数值，且每种类型的值分别定义在一个JSON文件中。文件中的内容为键值对(name-value)的形式。具体内容如下

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "greeting",
      "value": "你好"
    }
  ]
}

我们可以通过 name 引用相应的 value。具体语法为$r('app.<data_type>.<name>')。

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

例如上述的 greeting 的值，可通过$r('app.string.greeting')引用

---

图片缩放

当图片的原始大小与Image组件不同时，可通过objectFit()方法来设置图片的显示效果。该方法的参数类型为ImageFit枚举类型，可选的枚举值如下

ImageFit.None : 保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。

ImageFit.Contain : 保持宽高比进行缩小或者放大，使得显示区域刚好包含整个图片。

ImageFit.Cover : 保持宽高比进行缩小或者放大，使得图片刚好完全覆盖显示区域。

ImageFit.Fill : 不保持宽高比进行放大缩小，使得图片充满显示区域。

ImageFit.ScaleDown : 保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。

ImageFit.Auto : 自适应显示

各选项的效果如下图所示

---

图片插值

关于图片插值请移步主页另一篇文，有详细介绍

【鸿蒙HarmonyOS开发笔记】如何使用图片插帧将低像素图片清晰放大