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

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

一、操作环境

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

二、Image组件

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

接口

Image(src: string | PixelMap | Resource)

参数

属性

事件

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

好了就写到这吧！

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

我家地址:亚丁号

最后送大家一首诗:

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

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