鸿蒙开发 Image二次封装

@Component
export struct BaseImageView {
  // 图片
  @State src: string | PixelMap | Resource = ""
  // 占位
  @State placeSrc: string | PixelMap | Resource = $r("app.media.ic_place_default")
  // 错误
  @State errorSrc: string | PixelMap | Resource = ""
  @State mWidth: Length = ""
  @State mHeight: Length = ""
  // 圆角
  @State radius: BorderRadiuses | Length | LocalizedBorderRadiuses = ""
  // 填充
  @State fit: ImageFit = ImageFit.Fill
  //圆形
  @State isClip: boolean = false

  build() {

    Column() {
      Image(this.src)
        .alt(this.placeSrc)
        .borderRadius(this.isClip ? "100%" : this.radius)
        .objectFit(this.fit)
        .width(this.mWidth)
        .height(this.mHeight)
        .clip(this.isClip)
        .onError(() => {
          if (this.errorSrc) {
            this.placeSrc = this.errorSrc
          }
        })
    }
  }
}

使用：

      BaseImageView({
        src: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
        mWidth: 200,
        mHeight: 200,
      })
      BaseImageView({
        src: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3",
        errorSrc: $r("app.media.app_icon"),
        mWidth: 200,
        mHeight: 200,
      })
      BaseImageView({
        src: $r('app.media.app_icon'),
        isClip: true,
        mWidth: 200,
        mHeight: 200,
      })