当前位置：首页 > news >正文

HarmonyOS图片image使用

news 来源：原创 2025/6/5 11:51:28

Image(src: string | PixelMap | Resource)

Image组件加载图片失败或图片尺寸为0时，图片组件大小自动为0，不跟随父组件的布局约束。

官网文档：文档中心

加载基本类型图片，加载网络图片：

@Entry
@Component
struct ImageView {build() {Column({space:10}) {Flex({  alignItems: ItemAlign.Center }) {// 加载基本格式图片Row() {Image($r('app.media.image2')).width(110).height(110).margin(15).overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.image3')).width(110).height(110).margin(15).overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })}}//加载网络图片Column(){Image("https://img2.baidu.com/it/u=4656803,3497240314&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1084")// 直接加载网络地址，请填写一个具体的网络图片地址.alt($r('app.media.image2'))// 使用alt，在网络图片加载成功前使用占位图.objectFit(ImageFit.Cover) //图片平铺}}.height('100%').width('100%').padding({ left:10, right: 10, top: 10 })}
}