圖片組件

需要權(quán)限

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

子組件

無(wú)

接口

Image(src: string | PixelMap | Resource)

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

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

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

參數(shù)：

屬性

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

  [ r_1, r_2, r_3, r_4, r_5,     
    g_1, g_2, g_3, g_4, g_5,     
    b_1, b_2, b_3, b_4, b_5,     
    a_1, a_2, a_3, a_4, a_5 ]

R’ = r_1*R + r_2*G + r_3*B + r_4*A + r_5
G’ = g_1*R + g_2*G + g_3*B + g_4*A + g_5   
B’ = b_1*R + b_2*G + b_3*B + b_4*A + b_5  
A’ = a_1*R + a_2*G + a_3*B + a_4*A + a_5

ImageInterpolation

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

ImageRenderMode

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

事件

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

onComplete

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

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

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

參數(shù)：

onError

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

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

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

參數(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)始，該接口支持在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 })
  }
}

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

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

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

@Entry
@Component
struct ImageExample2 {
  build() {
    Column({ space: 10 }) {
      Image("https://www.example.com/xxx.png")// 直接加載網(wǎng)絡(luò)地址，請(qǐng)?zhí)顚懸粋€(gè)具體的網(wǎng)絡(luò)圖片地址
        .alt($r('app.media.icon'))// 使用alt，在網(wǎng)絡(luò)圖片加載成功前使用占位圖
        .width(100)
        .height(100)
    }
  }
}

為圖片添加事件

@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: { width: number,height: number }) => {
              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%')
  }
}