02. 快速上手！HarmonyOS4.0 Image组件详解

全栈若城

发布于 2024-03-16 10:46:03

2880

发布于 2024-03-16 10:46:03

文章被收录于专栏：若城技术专栏若城技术专栏

主要内容（思维导图）

1. 组件介绍

图片（Image）是用来显示图片的组件

2. 组件的使用

2.1. 网络图片的使用

使用网络图片时，需要申请权限ohos.permission.INTERNET

使用Stage模型的应用，需要在module.json5配置文件中声明权限。

"requestPermissions": [
  {
    //        开发网络请求权限
    "name": 'ohos.permission.INTERNET'
  }
],

具体如下图所示：

2.1.1. 案例展示

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
         Image('https://p3.itc.cn/q_70/images03/20210610/917db573aca1480cb7b8f4980eed61a7.png')
           .width(300)
           .height(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.1.2. 效果展示

申请权限	未申请权限

2.2. 本地图片访问

本地图片访问时使用的是$r ，图片资源存放的位置是 src > main > resources > base > media

注意：本地访问的话格式为 $r('app.media.图片名字')

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

3. 基于Image组件的属性

3.1. objectFit

设置图片的填充效果。默认值：ImageFit.Cover

3.1.1. 代码案例

@Entry
	@Component
	struct ImageNote {
		build() {
			Column() {
				Row(){
					Text('图片填充效果').fontSize(30).fontColor('#ccc').padding(10)
				}.width('100%').justifyContent(FlexAlign.Start)

				Row({space:20}){
					Column(){
						Image($r('app.media.myImage'))
							.width(100)
							.height(100)
							.objectFit(ImageFit.Fill)
						Text('Fill效果').fontSize(20)
					}
					Column(){
						Image($r('app.media.myImage'))
							.width(100)
							.height(100)
							.objectFit(ImageFit.Cover)
						Text('Cover效果').fontSize(20)
					}
					Column(){
						Image($r('app.media.myImage'))
							.width(100)
							.height(100)
							.objectFit(ImageFit.Auto)
						Text('Auto效果').fontSize(20)
					}

					Column(){
						Image($r('app.media.myImage'))
							.width(100)
							.height(100)
							.objectFit(ImageFit.Contain)
						Text('Contain效果').fontSize(20)
					}

				}.width('100%')
					.height(150)

				Row({space:20}){
					Column(){
						Image($r('app.media.myImage'))
							.width(100)
							.height(100)
							.objectFit(ImageFit.Contain)
						Text('Contain效果').fontSize(20)
					}

				}.width('100%')
					.height(150)
			}
			.width('100%')
		}
	}

3.1.2. 效果展示

3.1.3. objectFit属性

名称	描述
Contain	保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Cover	保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Auto	自适应显示
Fill	不保持宽高比进行放大缩小，使得图片充满显示边界。
ScaleDown	保持宽高比显示，图片缩小或者保持不变。
None	保持原有尺寸显示。

3.2. renderMode

设置图片的渲染模式为原色或黑白。

默认值：ImageRenderMode.Original

注意： svg类型图源不支持该属性。

3.2.1. 代码案例

renderMode

3.2.2. 效果演示

3.2.3. Image组件其他属性

名称	参数类型	描述
alt	string \| Resource	加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。默认值：null 从API version 9开始，该接口支持在ArkTS卡片中使用。
objectFit	ImageFit	设置图片的填充效果。默认值：ImageFit.Cover 从API version 9开始，该接口支持在ArkTS卡片中使用。
objectRepeat	ImageRepeat	设置图片的重复样式。从中心点向两边重复，剩余空间不足放下一张图片时会截断。默认值：ImageRepeat.NoRepeat 从API version 9开始，该接口支持在ArkTS卡片中使用。说明： svg类型图源不支持该属性。
interpolation	ImageInterpolation	设置图片的插值效果，即减轻低清晰度图片在放大显示时出现的锯齿问题。默认值：ImageInterpolation.None 从API version 9开始，该接口支持在ArkTS卡片中使用。说明： svg类型图源不支持该属性。 PixelMap资源不支持该属性。
renderMode	ImageRenderMode	设置图片的渲染模式为原色或黑白。默认值：ImageRenderMode.Original 从API version 9开始，该接口支持在ArkTS卡片中使用。说明： svg类型图源不支持该属性。
sourceSize	{ width: number, height: number }	设置图片解码尺寸，降低图片的分辨率，常用于需要让图片显示尺寸比组件尺寸更小的场景。和ImageFit.None配合使用时可在组件内显示小图。单位：px 从API version 9开始，该接口支持在ArkTS卡片中使用。说明：仅在目标尺寸小于图源尺寸时生效。 svg类型图源不支持该属性。 PixelMap资源不支持该属性。
matchTextDirection	boolean	设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。
fitOriginalSize	boolean	图片组件尺寸未设置时，显示尺寸是否跟随图源尺寸。组件不设置宽高或仅设置宽/高时，该属性不生效。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。
fillColor	ResourceColor	设置填充颜色，设置后填充颜色会覆盖在图片上。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：仅对svg图源生效，设置后会替换svg图片的填充颜色。
autoResize	boolean	设置图片解码过程中是否对图源自动缩放。设置为true时，组件会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。如原图大小为1920x1080，而显示区域大小为200x200，则图片会自动解码到200x200的尺寸，大幅度节省图片占用的内存。默认值：true 从API version 9开始，该接口支持在ArkTS卡片中使用。
syncLoad8+	boolean	设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。说明：建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可。
copyOption9+	CopyOptions	设置图片是否可复制。当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。默认值：CopyOptions.None 从API version 9开始，该接口支持在ArkTS卡片中使用。说明： svg图片不支持复制。
colorFilter9+	ColorFilter	给图像设置颜色滤镜效果，入参为一个的4x5的RGBA转换矩阵。矩阵第一行表示R（红色）的向量值，第二行表示G（绿色）的向量值，第三行表示B（蓝色）的向量值，第四行表示A（透明度）的向量值，4行分别代表不同的RGBA的向量值。 RGBA值分别是0和1之间的浮点数字，当矩阵对角线值为1时，保持图片原有色彩。计算规则：如果输入的滤镜矩阵为： [ r_1, r_2, r_3, r_4, r_5, g_1, g_2, g_3, g_4, g_5, b_1, b_2, b_3, b_4, b_5, a_1, a_2, a_3, a_4, a_5 ] 像素点为[R, G, B, A] 则过滤后的颜色为 [R’, G’, B’, A’] R’ = r_1R + r_2G + r_3B + r_4A + r_5 G’ = g_1R + g_2G + g_3B + g_4A + g_5 B’ = b_1R + b_2G + b_3B + b_4A + b_5 A’ = a_1R + a_2G + a_3B + a_4A + a_5 从API version 9开始，该接口支持在ArkTS卡片中使用。
draggable9+	boolean	设置组件默认拖拽效果，设置为true时，组件可拖拽。不能和拖拽事件事件同时使用。默认值：false

4. Image组件通用案例

4.1. 自定义形状

Column() {
	Image($r('app.media.myImage'))
		.width(100)
		.height(100)
		.borderRadius(50)

	Text('自定义形状').fontSize(20)
}

4.2. 自定义圆角

Column() {
	Image($r('app.media.myImage'))
		.width(100)
		.height(100)
		.borderRadius(10)

	Text('自定义圆角').fontSize(20)
}

4.3. 图片加载错误

....
  @State myImgData: string  = 'https://imssg2.baidu.com/it/u=42836227,536469854&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
....

Column() {
  Image(this.myImgData)
    .width(100)
    .height(100)
    .borderRadius(10)
    .onError(()=>{
      //               图片加载错误, 重新复制
      //              console.log()
      this.myImgData = 'https://img2.baidu.com/it/u=42836227,536469854&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
    })

  Text('图片加载错误').fontSize(20)
}