鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Image图片组件

一、操作环境

操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Image组件

Image 用来加载并显示图片的基础组件，它支持从内存、本地和网络加载图片，当从网络加载图片的时候，需要申请网络访问权限。ohos.permission.INTERNET

接口

Image(src: string | PixelMap | Resource)

参数

参数名	参数类型	必填	默认值	参数描述
src	string\| PixelMap\| Resource	是	-	图片的数据源，支持本地图片和网络图片。当使用相对路径引用图片资源时，例如Image("common/test.jpg")，不支持该Image组件被跨包/跨模块调用，建议使用$r方式来管理需全局使用的图片资源。 - 支持的图片格式包括png、jpg、bmp、svg和gif。 - 支持Base64字符串。格式data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。 - 支持dataability://路径前缀的字符串，用于访问通过data ability提供的图片路径。

参数名

参数类型

必填

默认值

参数描述

src

string| PixelMap| Resource

是

图片的数据源，支持本地图片和网络图片。

当使用相对路径引用图片资源时，例如Image("common/test.jpg")，不支持该Image组件被跨包/跨模块调用，建议使用$r方式来管理需全局使用的图片资源。

- 支持的图片格式包括png、jpg、bmp、svg和gif。

- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。

- 支持dataability://路径前缀的字符串，用于访问通过data ability提供的图片路径。

属性

名称	参数类型	默认值	描述
alt	string \| Resource	-	加载时显示的占位图。仅支持本地图片。
objectFit	ImageFit	Cover	设置图片的缩放类型。
objectRepeat	ImageRepeat	NoRepeat	设置图片的重复样式。说明： - svg类型图源不支持该属性。
interpolation	ImageInterpolation	None	设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。说明： - svg类型图源不支持该属性。 - PixelMap资源不支持该属性。
renderMode	ImageRenderMode	Original	设置图片渲染的模式。说明： - svg类型图源不支持该属性。
sourceSize	{ width: number, height: number }	-	设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。说明： - PixelMap资源和SVG图片不支持该属性。
matchTextDirection	boolean	false	设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。
fitOriginalSize	boolean	true	图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。
fillColor	ResourceColor	-	仅对svg图源生效，设置后会替换svg图片的fill颜色。
autoResize	boolean	true	是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。
syncLoad8+	boolean	false	设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。

事件

onComplete：图片成功加载时触发该回调，返回图片原始尺寸信息。
onError：图片加载出现异常时触发该回调。
onFinish：当加载的源文件为带动效的 svg 图片时，当 svg 动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

三、示例

代码

// @ts-nocheck
@Entry
@Component
struct Index {
  // @ts-ignore
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Image($r("app.media.icon")) //本机加载（就是本地的App图标）
          .width(180)
          .height(180)
          .renderMode(ImageRenderMode.Original) //  原图渲染
          .onClick(() => { //  通用事件
            if (this.src == this.on || this.src == this.off2on) {
              this.src = this.on2off
            } else {
              this.src = this.off2on
            }
          })
          .onComplete((msg: { width: number,height: number }) => {
            console.log(msg.width)
            console.log(msg.height)
          })
          .onFinish(() => {
          if (this.src == this.off2on) {
            this.src = this.on
          } else {
            this.src = this.off
          }
        })
        Image('https://img.sample.com/imgs/test.png') //加载网络图片
          .width(180)
          .height(80)
          .onError(() => {
            console.error('load image fail') //image加载会失败 没申请权限
          })
        // @ts-ignore
        Image(this.pixelMap) // pixelMap为内存图片
          .width(180)
          .height(80)
      }
      .width('100%')
    }
    .height('100%')
  }
}

好了就写到这吧！

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马？
惟有点赞加关注大军。