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

Table of Contents

• 主要内容（思维导图）
• 组件介绍
• 组件的使用
• 网络图片的使用
• 案例展示
• 效果展示
• 本地图片访问
• 基于Image组件的属性
• objectFit
• **代码案例**
• 效果展示
• objectFit属性
• renderMode
• 代码案例
• 效果演示
• Image组件其他属性
• Image组件通用案例
• 自定义形状
• 自定义圆角
• 图片加载错误
• 效果展示

主要内容（思维导图）

组件介绍

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

组件的使用

网络图片的使用

使用网络图片时，需要申请权限ohos.permission.INTERNET
使用Stage模型的应用，需要在module.json5配置文件中声明权限。

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

具体如下图所示：

案例展示

@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%')
  }
}

效果展示

申请权限	未申请权限

本地图片访问

本地图片访问时使用的是 $r ， 图片资源存放的位置是 src > main > resources > base > media
注意： 本地访问的话 格式为 $r('app.media.图片名字')

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

基于Image组件的属性

objectFit

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

代码案例

@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%')
		}
	}

效果展示

objectFit属性

renderMode

设置图片的渲染模式为原色或黑白。
默认值：ImageRenderMode.Original
注意： svg类型图源不支持该属性。

代码案例

renderMode

效果演示

Image组件其他属性

Image组件通用案例

自定义形状

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

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

自定义圆角

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

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

图片加载错误

....
  @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)
}

效果展示