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