Image

Image為圖片組件，常用于在應(yīng)用中顯示圖片。Image支持加載[PixelMap]、[ResourceStr]和[DrawableDescriptor]類(lèi)型的數(shù)據(jù)源，支持png、jpg、bmp、svg和gif類(lèi)型的圖片格式。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

需要權(quán)限

使用網(wǎng)絡(luò)圖片時(shí)，需要申請(qǐng)權(quán)限ohos.permission.INTERNET。

子組件

無(wú)

接口

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

通過(guò)圖片數(shù)據(jù)源獲取圖片，用于后續(xù)渲染展示。

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

從API version 9開(kāi)始，該接口支持在A(yíng)rkTS卡片中使用。

參數(shù)：

屬性

屬性的詳細(xì)使用指導(dǎo)請(qǐng)參考[添加屬性]。除支持[通用屬性]外，還支持以下屬性：

說(shuō)明：

• 使用快捷組合鍵對(duì)Image組件復(fù)制時(shí)，Image組件必須處于[獲焦?fàn)顟B(tài)]。Image組件默認(rèn)不獲焦，需將[focusable]屬性設(shè)置為true，即可使用TAB鍵將焦點(diǎn)切換到組件上，再將[focusOnTouch]屬性設(shè)置為true，即可實(shí)現(xiàn)點(diǎn)擊獲焦。
• 圖片設(shè)置為svg圖源時(shí)，當(dāng)前支持的標(biāo)簽是svg、rect、circle、ellipse、path、line、polyline和polygon。

ImageInterpolation

從API version 9開(kāi)始，該接口支持在A(yíng)rkTS卡片中使用。

ImageRenderMode

從API version 9開(kāi)始，該接口支持在A(yíng)rkTS卡片中使用。

事件

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

onComplete

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

圖片數(shù)據(jù)加載成功和解碼成功時(shí)均觸發(fā)該回調(diào)，返回成功加載的圖片尺寸。

從API version 9開(kāi)始，該接口支持在A(yíng)rkTS卡片中使用。

參數(shù)：

onError

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

圖片加載異常時(shí)觸發(fā)該回調(diào)。

從API version 9開(kāi)始，該接口支持在A(yíng)rkTS卡片中使用。

參數(shù)：

onFinish

onFinish(event: () => void)

當(dāng)加載的源文件為帶動(dòng)效的svg格式圖片時(shí)，svg動(dòng)效播放完成時(shí)會(huì)觸發(fā)這個(gè)回調(diào)。如果動(dòng)效為無(wú)限循環(huán)動(dòng)效，則不會(huì)觸發(fā)這個(gè)回調(diào)。

僅支持svg格式的圖片。

從API version 9開(kāi)始，該接口支持在A(yíng)rkTS卡片中使用。

示例

加載基本類(lèi)型圖片

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

加載網(wǎng)絡(luò)圖片

加載網(wǎng)絡(luò)圖片時(shí)，默認(rèn)網(wǎng)絡(luò)超時(shí)是5分鐘，建議使用alt配置加載時(shí)的占位圖。如果需要更靈活的網(wǎng)絡(luò)配置，可以使用[HTTP]工具包發(fā)送網(wǎng)絡(luò)請(qǐng)求，接著將返回的數(shù)據(jù)解碼為Image組件中的PixelMap，圖片開(kāi)發(fā)可參考[圖片處理]。HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

使用網(wǎng)絡(luò)圖片時(shí)，需要申請(qǐng)權(quán)限ohos.permission.INTERNET。

@Entry
@Component
struct ImageExample2 {
  build() {
    Column({ space: 10 }) {
      Image("https://www.example.com/xxx.png")// 直接加載網(wǎng)絡(luò)地址，請(qǐng)?zhí)顚?xiě)一個(gè)具體的網(wǎng)絡(luò)圖片地址
        .alt($r('app.media.icon'))// 使用alt，在網(wǎng)絡(luò)圖片加載成功前使用占位圖
        .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 }
            })
        }
        // 為圖片添加點(diǎn)擊事件，點(diǎn)擊完成后加載特定圖片
        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%')
  }
}

審核編輯 黃宇