图片组件演示

Image 是 ArkUI 内置媒体基础组件，专门用于页面渲染展示各类图片资源，是界面承载图片、图标、封面、头像的核心组件Huawei Developer。

官方标准接口：Image(src: ResourceStr | PixelMap | DrawableDescriptor)

• 作用：加载并渲染本地图、网络图、矢量 SVG、像素位图、Base64 图片；
• 支持格式：jpg、jpeg、png、svg、webp；不支持 apng、svga 动图；
• 无内置子组件，只能单独使用或嵌套在 Row/Column/Flex/Stack 等布局容器内。
• src 是 Image 唯一必填参数
• 网络图片必须在 module.json5 配置网络权限，否则无法加载；
• 大图建议开启 .autoResize(true) 防止内存溢出；
• 列表大量循环 Image 时，建议固定尺寸 + Cover 模式提升渲染性能
• 例子：

• @Entry
  @Component
  struct ID{
    build() {
      Column(){
        Text('欢迎来到河北软件职业技术学院')
          .fontSize(30)
          .fontWeight(FontWeight.Bolder)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding(20)
  
        Image($r('app.media.first'))
          .width('%')
          .height(200)
          .borderRadius(15555)
          .objectFit(ImageFit.Cover)
        Row({space:1}){
          Column(){
            Text("鸿蒙系统开发")
              .fontSize(24)
              .width('45%')
              .textAlign(TextAlign.Center)
          }
  
          Image($r('app.media.second'))
        }
  
      }
      .width('100%')
      .height('100%')
    }
  }

•