在鸿蒙应用开发中，Image 组件用于加载和显示图片资源，并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。

关键词

• Image 组件
• 图片加载
• 本地资源
• 远程图片
• 图片轮播

---

一、Image 组件基础

Image 组件主要用于显示图片资源，支持加载本地和远程图片，并能通过多种方式控制图片的大小和缩放模式。

1.1 加载本地图片

• 将图片资源放在项目的 resources 文件夹下，使用 $r 引用图片：

  // 加载本地图片，引用路径为资源文件夹中的 app.media.sampleImage
  Image($r('app.media.sampleImage'))
  

1.2 加载远程图片

• 直接传入图片 URL，即可实现远程图片的加载：

  // 加载远程图片，通过 URL 直接加载网络图片
  Image('https://example.com/sample.jpg')
  

1.3 设置图片大小

• 使用 width 和 height 来指定图片尺寸：

  // 设置图片大小为 100x100
  Image($r('app.media.sampleImage')).width(100)  // 设置宽度为 100.height(100) // 设置高度为 100
  

1.4 图片缩放模式

• 使用 objectFit 设置图片的缩放模式（如填充、适应、覆盖等）：

  // 使用 Cover 模式填充图片，可能会裁剪图片边缘
  Image($r('app.media.sampleImage')).objectFit(ImageFit.Cover)
  

  缩放模式	描述
  ImageFit.Cover	图片覆盖整个区域，可能部分裁剪
  ImageFit.Contain	图片适应区域，保持宽高比
  ImageFit.Fill	图片拉伸填满整个区域
  ImageFit.ScaleDown	图片缩小适应区域，不放大

---

二、Image 组件样式与圆角

Image 组件支持多种样式设置，包括圆角、边框和阴影效果，使图片展示更具个性化。

2.1 设置圆角

• 使用 borderRadius 设置图片的圆角效果：

  // 设置图片圆角为 20
  Image