鸿蒙Next Image常用方法总结

Image支持加载PixelMap、ResourceStr、DrawableDescriptor类型的数据源，支持png、jpg、jpeg、bmp、svg、webp、gif和heif类型的图片格式。
本文展示以下：
1.objectFit图片的填充效果
2.alt占位图
3.sourceSize设置图片解码尺寸
4.onComplete加载成功和解码成功时的回调

feb43e77d5a04fe8b7e4f75669c8cf2c.png

@Entry
@ComponentV2
struct ImageTest{
  @Local imageInfo:string=''
  @Builder
  itemBuild(fit:string,imagefit:ImageFit){
    GridItem(){
      Column(){
       Image($r('app.media.wechatscan')).width(90).height(90).objectFit(imagefit)
        Text(fit).fontSize(15)
      }
    }
  }
  build() {
    Column({space:10}){
      Grid() {
        this.itemBuild('默认Cover',ImageFit.Cover)  //保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，对齐方式为水平居中
        this.itemBuild('Contain',ImageFit.Contain) //保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，对齐方式为水平居中
        this.itemBuild('Auto',ImageFit.Auto)  //图像会根据其自身尺寸和组件的尺寸进行适当缩放，以在保持比例的同时填充视图，对齐方式为水平居中
        this.itemBuild('Fill',ImageFit.Fill)  //不保持宽高比进行放大缩小，使得图片充满显示边界，对齐方式为水平居中
        this.itemBuild('ScaleDown',ImageFit.ScaleDown) //保持宽高比显示，图片缩小或者保持不变，对齐方式为水平居中
        this.itemBuild('None',ImageFit.None)  //保持宽高比显示，图片缩小或者保持不变，对齐方式为水平居中
        this.itemBuild('TOP_START',ImageFit.TOP_START)
        this.itemBuild('TOP',ImageFit.TOP)
        this.itemBuild('TOP_END',ImageFit.TOP_END)
        this.itemBuild('START',ImageFit.START)
        this.itemBuild('CENTER',ImageFit.CENTER)
        this.itemBuild('END',ImageFit.END)
        this.itemBuild('BOTTOM_START',ImageFit.BOTTOM_START)
        this.itemBuild('BOTTOM',ImageFit.BOTTOM)
        this.itemBuild('BOTTOM_END',ImageFit.BOTTOM_END)
      }.layoutDirection(GridDirection.Row)
      .columnsGap(10)
      .rowsGap(10)
      Row(){
        Image('https://iknow-pic.cdn.bcebos.com/a6efce1b9d16fdfa65144071a68f8c5494ee7b31')
          .alt($r('app.media.wechat'))  //占位图  支持使用objectFit设置填充效果，与图片的填充效果一致
          .width(200).height(100).objectFit(ImageFit.Contain)
          // .sourceSize({width:200,height:100}) //设置图片解码尺寸
          .autoResize(true) //设置图片解码过程中是否对图源自动缩放
          .onComplete((event)=>{
            this.imageInfo= '图片的原始宽:'+event?.width+' 图片的原始高:'+event?.height
              +' \n组件的宽:'+event?.componentWidth +' n组件的高:'+event?.componentHeight
              +' \n图片实际绘制的宽度vp:'+px2vp(event?.contentWidth)+' 图片实际绘制的高度vp:'+px2vp(event?.contentHeight)
          })
          .onError((error)=>{
            this.imageInfo= '错误信息:'+error.message
          })
        Text(this.imageInfo).layoutWeight(1)
      }.width('100%')
    }.height('100%')

  }
}