概述
Image为图片组件，用于在应用中显示图片。
参数
Image组件的参数类型为string | Resource | media.PixelMap
下面对三种参数类型逐一进行介绍
● string类型
string类型的参数用于通过路径的方式引用图片，包罗本地图片和网络图片。
本地图片
注意：使用这种方式引入本地图片，必要将图片置于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类型
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": "你好"
- }
- ]
- }
注意：无需指定具体版本，系统会主动根据所处环境选择相应版本
例如上述的 greeting 的值，可通过$r('app.string.greeting')引用
图片缩放
当图片的原始大小与Image组件差别时，可通过objectFit()方法来设置图片的显示结果。该方法的参数类型为ImageFit枚举类型，可选的枚举值如下
ImageFit.None : 保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。
ImageFit.Contain : 保持宽高比进行缩小或者放大，使得显示区域刚好包罗整个图片。
ImageFit.Cover : 保持宽高比进行缩小或者放大，使得图片刚好完全覆盖显示区域。
ImageFit.Fill : 不保持宽高比进行放大缩小，使得图片充满显示区域。
ImageFit.ScaleDown : 保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。
ImageFit.Auto : 自顺应显示
各选项的结果如下图所示
图片插值
关于图片插值请移步主页另一篇文，有详细介绍
【鸿蒙HarmonyOS开发笔记】如何使用图片插帧将低像素图片清晰放大
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
