华为开发者学堂班级链接：

https://developer.huawei.com/consumer/cn/training/classDetail/46b54a56c7e54e74973e0af43c077bff?type=1?ha_source=hmosclass&ha_sourceId=89000248

图片组件（Image）是鸿蒙UI中展示图片资源的核心组件，支持本地图片、网络图片加载，以及裁剪、缩放、圆角等效果处理，广泛应用于头像、商品图、轮播图等场景。其核心难点在于图片加载优化和多设备适配，避免因图片尺寸不当导致页面变形或加载卡顿。

以用户头像和商品图展示为例，实现圆形头像（裁剪效果）、商品图自适应缩放，同时添加加载中占位图和加载失败提示，提升用户体验。关键代码示例如下：

@Entry

@Component

struct ImageDemo {

  build() {

    Column({ space: 30 }) {

      // 圆形头像（裁剪+圆角）

      Image($r("app.media.avatar")) // 加载本地图片

        .width(120)

        .height(120)

        .objectFit(ImageFit.Cover) // 裁剪填充，保持图片比例

        .borderRadius(60) // 圆角为宽度的一半，实现圆形

        .border({ width: 2, color: '#007AFF' }) // 边框装饰

        .placeholder($r("app.media.placeholder")) // 加载中占位图

        .error($r("app.media.error")) // 加载失败提示图

      // 商品图（自适应缩放）

      Image("https://example.com/product.jpg") // 加载网络图片

        .width('100%')

        .height(200)

        .objectFit(ImageFit.Contain) // 保持图片比例，完整显示

        .borderRadius(8) // 圆角效果

        .placeholder($r("app.media.placeholder"))

        .error($r("app.media.error"))

        .margin(0, 10)

      Text("图片加载优化建议：优先使用本地图片，网络图片建议压缩尺寸")

        .fontSize(14)

        .fontColor('#666666')

        .textAlign(TextAlign.Center)

    }

    .width('100%')

    .padding(20)

    .backgroundColor('#F5F5F5')

  }

}

开发时需注意，网络图片加载需添加权限（在config.json中配置网络权限），objectFit属性需根据场景选择：Cover（裁剪填充，适合头像）、Contain（完整显示，适合商品图）、Fill（拉伸填充，慎用）。此外，通过placeholder和error属性处理加载状态，可避免页面留白，提升用户体验；图片尺寸建议适配主流设备分辨率，减少加载耗时。