Image

Image為圖片組件，常用于在應用中顯示圖片。Image支持加載[PixelMap]、[ResourceStr]和[DrawableDescriptor]類型的數據源，支持png、jpg、bmp、svg和gif類型的圖片格式。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

需要權限

使用網絡圖片時，需要申請權限ohos.permission.INTERNET。

子組件

無

接口

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

通過圖片數據源獲取圖片，用于后續渲染展示。

Image組件加載圖片失敗或圖片尺寸為0時，圖片組件大小自動為0，不跟隨父組件的布局約束。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數：

屬性

屬性的詳細使用指導請參考[添加屬性]。除支持[通用屬性]外，還支持以下屬性：

說明：

• 使用快捷組合鍵對Image組件復制時，Image組件必須處于[獲焦狀態]。Image組件默認不獲焦，需將[focusable]屬性設置為true，即可使用TAB鍵將焦點切換到組件上，再將[focusOnTouch]屬性設置為true，即可實現點擊獲焦。
• 圖片設置為svg圖源時，當前支持的標簽是svg、rect、circle、ellipse、path、line、polyline和polygon。

ImageInterpolation

從API version 9開始，該接口支持在ArkTS卡片中使用。

ImageRenderMode

從API version 9開始，該接口支持在ArkTS卡片中使用。

事件

除支持[通用事件]外，還支持以下事件：

onComplete

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number,contentWidth: number, contentHeight: number, contentOffsetX: number, contentOffsetY: number}) => void) }) => void)

圖片數據加載成功和解碼成功時均觸發該回調，返回成功加載的圖片尺寸。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數：

onError

onError(callback: (event?: { componentWidth: number, componentHeight: number , message: string }) => void)

圖片加載異常時觸發該回調。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數：

onFinish

onFinish(event: () => void)

當加載的源文件為帶動效的svg格式圖片時，svg動效播放完成時會觸發這個回調。如果動效為無限循環動效，則不會觸發這個回調。

僅支持svg格式的圖片。

從API version 9開始，該接口支持在ArkTS卡片中使用。

示例

加載基本類型圖片

@Entry
@Component
struct ImageExample1 {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // 加載png格式圖片
          Image($r('app.media.ic_camera_master_ai_leaf'))
            .width(110).height(110).margin(15)
            .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加載gif格式圖片
          Image($r('app.media.loading'))
            .width(110).height(110).margin(15)
            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
        Row() {
          // 加載svg格式圖片
          Image($r('app.media.ic_camera_master_ai_clouded'))
            .width(110).height(110).margin(15)
            .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加載jpg格式圖片
          Image($r('app.media.ic_public_favor_filled'))
            .width(110).height(110).margin(15)
            .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
      }
    }.height(320).width(360).padding({ right: 10, top: 10 })
  }
}

加載網絡圖片

加載網絡圖片時，默認網絡超時是5分鐘，建議使用alt配置加載時的占位圖。如果需要更靈活的網絡配置，可以使用[HTTP]工具包發送網絡請求，接著將返回的數據解碼為Image組件中的PixelMap，圖片開發可參考[圖片處理]。HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

使用網絡圖片時，需要申請權限ohos.permission.INTERNET。

@Entry
@Component
struct ImageExample2 {
  build() {
    Column({ space: 10 }) {
      Image("https://www.example.com/xxx.png")// 直接加載網絡地址，請填寫一個具體的網絡圖片地址
        .alt($r('app.media.icon'))// 使用alt，在網絡圖片加載成功前使用占位圖
        .width(100)
        .height(100)
    }
  }
}

為圖片添加事件

class tmp{
  width: number = 0
  height: number = 0
}
let msg:tmp = new tmp()
@Entry
@Component
struct ImageExample3 {
  @State widthValue: number = 0;
  @State heightValue: number = 0;
  private on: Resource = $r('app.media.image_on');
  private off: Resource = $r('app.media.image_off');
  private on2off: Resource = $r('app.media.image_on2off');
  private off2on: Resource = $r('app.media.image_off2on');
  @State src: Resource = this.on;

  build() {
    Column() {
      Row({ space: 20 }) {
        Column() {
          Image($r('app.media.img_example1'))
            .alt($r('app.media.ic_public_picture'))
            .sourceSize({
              width: 900,
              height: 900
            })
            .objectFit(ImageFit.Cover)
            .height(180).width(180)
            // 圖片加載完成后，獲取圖片尺寸。
            .onComplete(msg = > {
              if(msg){
                this.widthValue = msg.width
                this.heightValue = msg.height
              }
            })
            .onError(() = > {
              console.log('load image fail')
            })
            .overlay('nwidth: ' + String(this.widthValue) + ' height: ' + String(this.heightValue), {
              align: Alignment.Bottom,
              offset: { x: 0, y: 20 }
            })
        }
        // 為圖片添加點擊事件，點擊完成后加載特定圖片
        Image(this.src)
          .width(120).height(120)
          .onClick(() = > {
            if (this.src == this.on || this.src == this.off2on) {
              this.src = this.on2off
            } else {
              this.src = this.off2on
            }
          })
          .onFinish(() = > {
            if (this.src == this.off2on) {
              this.src = this.on
            } else {
              this.src = this.off
            }
          })
      }
    }.width('100%')
  }
}

審核編輯 黃宇