ArkTS 常用组件-图片（Image）
ArkTS 常用组件-图片（Image）概述参数常用属性图片尺寸图片缩放图片插值
概述
Image为图片组件，用于在应用中显示图片。
地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-image-V13
参数
**Image**组件的参数类型为string | Resource | media.PixelMap，相关案例见
Column() {
// `**Image**`组件的参数类型为`string | Resource | media.PixelMap`
Button('参数')
// 使用这种方式引入本地图片，需要将图片置于`ets`目录下，并且需要为`Image`组件提供图片相对于`ets`目录的路径。
Image('/pages/component/image/no_order.png')
.width(200).height(200)
// 网络图片 注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。
Image('http://static.tech-harry.cn/typora/a5fb5917ebb0439bb0626489aaa4f1b0.png')
.width(200).height(200)
// 可通过`$r('app.media.no_order')`引用
Image($r('app.media.no_order'))
.width(200).height(200)
// 通过`$rawfile('no_order.png')`的方式引用
Image($rawfile('no_order.png'))
.width(200).height(200)
}
string类型
string类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。
- 本地图片
Image('/pages/component/image/no_order.png')
注意：使用这种方式引入本地图片，需要将图片置于ets目录下，并且需要为Image组件提供图片相对于ets目录的路径。
- 网络图片
Image('http://static.tech-harry.cn/typora/a5fxxxb0.png')
注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。权限配置相关的内容在后续章节会系统介绍。
**Resource**类型
Resource类型的参数用于引入 resources 目录下的图片。
resources目录下可用于存放图片的目录有resources/*/media 以及 resources/rawfile，两个目录下图片的使用方式有所不同，下面逐一介绍
- media目录
该目录下的资源，需要使用$r('app.media.<filename>')的方式引用。
注意：无需指定具体版本，系统会自动根据所处环境选择相应版本
示例中的no_order.png图片，可通过Image($r('app.media.no_order'))引用。需要注意的是$r()的返回值即为 **Resource** 类型，因此可以直接将$r('app.media.no_order')作为 Image 组件的参数，例如Image($r('app.media.img'))。
- rawfile目录
该目录下的资源，可通过$rawfile('path/to/your/file')的方式引用，文件的路径为相对于 rawfile 的路径。示例中的no_order.png，须使用$rawfile('no_order.png)引用。需要注意的是，$rawfile()的返回值也是Resource类型，因此其也可以直接作为 Image 组件的参数，如Image($rawfile('no_order.png))。
常用属性
图片尺寸
图片尺寸可通过width()方法和height()方法进行设置。例如
Column() {
Button('常用属性')
// 图片尺寸可通过`width()`方法和`height()`方法进行设置
// `string`类型的参数可为百分比，例如`'100%'`，或者为具体尺寸，例如`'100px'`
Image($r('app.media.no_order'))
.width(100)
.height(100)
}
两个方法可接收的参数类型均为string | number | Resource。
下面对三种参数类型逐一进行介绍。
**string**类型
string类型的参数可为百分比，例如'100%'，或者为具体尺寸，例如'100px'。具体尺寸的单位，常用的有两个，分别是px和vp
**number**类型
number类型的参数，默认以vp作为单位。
**Resource**类型
Resource类型参数用于引用resources下的element目录中定义的数值。
引用element目录中的数值，同样需要使用$r()函数。要了解具体语法，需要先熟悉element目录下的文件内容。
图片缩放
当图片的原始大小与Image组件不同时，可通过objectFit()方法来设置图片的显示效果。该方法的参数类型为ImageFit枚举类型，可选的枚举值如下
| 名称 | 描述 |
ImageFit.None |
保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。 |
ImageFit.Contain |
保持宽高比进行缩小或者放大，使得显示区域刚好包含整个图片。 |
ImageFit.Cover |
保持宽高比进行缩小或者放大，使得图片刚好完全覆盖显示区域。 |
ImageFit.Fill |
不保持宽高比进行放大缩小，使得图片充满显示区域。 |
ImageFit.ScaleDown |
保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。 |
ImageFit.Auto |
自适应显示 |
Column({ space: 20 }) {
Column() {
Button('图片缩放')
Image($r('app.media.img'))
.width('730px')
.height('280px')
Text('原图')
}
Row({ space: 20 }) {
// `ImageFit.None`保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。
Column() {
Image($r('app.media.img'))
.width('450px')
.height('450px')
.borderWidth(1)
.objectFit(ImageFit.None)
Text('ImageFit.None')
}
//`ImageFit.Contain`保持宽高比进行缩小或者放大，使得显示区域刚好包含整个图片。
Column() {
Image($r('app.media.img'))
.width('450px')
.height('450px')
.borderWidth(1)
.objectFit(ImageFit.Contain)
Text('ImageFit.Contain')
}
}
Row({ space: 20 }) {
// `ImageFit.Cover`保持宽高比进行缩小或者放大，使得图片刚好完全覆盖显示区域。
Column() {
Image($r('app.media.img'))
.width('450px')
.height('450px')
.borderWidth(1)
.objectFit(ImageFit.Cover)
Text('ImageFit.Cover')
}
// `ImageFit.Fill`不保持宽高比进行放大缩小，使得图片充满显示区域。
Column() {
Image($r('app.media.img'))
.width('450px')
.height('450px')
.borderWidth(1)
.objectFit(ImageFit.Fill)
Text('ImageFit.Fill')
}
}
Row({ space: 20 }) {
// `ImageFit.ScaleDown`保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。
Column() {
Image($r('app.media.img'))
.width('450px')
.height('450px')
.borderWidth(1)
.objectFit(ImageFit.ScaleDown)
Text('ImageFit.ScaleDown')
}
// `ImageFit.Auto`自适应显示
Column() {
Image($r('app.media.img'))
.width('450px')
.height('450px')
.borderWidth(1)
.objectFit(ImageFit.Auto)
Text('ImageFit.Auto')
}
}
}
各选项的效果如下图所示
图片插值
当原图分辨率较低并且需要放大显示时，图片会模糊并出现锯齿。如下图所示
这时可以使用interpolation()方法对图片进行插值，使图片显示得更清晰。该方法的参数为ImageInterpolation枚举类型，可选的值有
| 名称 | 描述 |
ImageInterpolation.None |
不使用图片插值。 |
ImageInterpolation.High |
高质量插值，可能会影响图片渲染的速度。 |
ImageInterpolation.Medium |
中等质量插值。 |
ImageInterpolation.Low |
低等质量插值。 |
Column({ space: 20 }) {
Column() {
Button('图片插值')
Text('原图分辨率 40px*40px')
Row() {
Column() {
Image($r('app.media.interpolation'))
.width(100)
.height(100)
.interpolation(ImageInterpolation.None)
Text('None')
}
Column() {
Image($r('app.media.interpolation'))
.width(100)
.height(100)
.interpolation(ImageInterpolation.Low)
Text('Low')
}
}
Row() {
Column() {
Image($r('app.media.interpolation'))
.width(100)
.height(100)
.interpolation(ImageInterpolation.Medium)
Text('Medium')
}
Column() {
Image($r('app.media.interpolation'))
.width(100)
.height(100)
.interpolation(ImageInterpolation.High)
Text('High')
}
}
}
}
各选项效果如下图所示
关注我,公众号搜“Harry技术”带你看不一样的人间烟火！
