鸿蒙Next中image组件的使用方法

在鸿蒙Next中，如何使用image组件加载本地和网络图片？能否通过代码示例说明如何设置图片路径、调整尺寸以及添加占位图？另外，image组件支持哪些图片格式，是否有性能优化的建议？

2 回复

鸿蒙Next的image组件？简单说就是“放图三连”：

  1. src填路径，网络链接或本地资源都行；
  2. 宽高记得设，不然可能撑爆屏幕；
  3. 加个alt备用文本，加载失败时展示“图裂了”的优雅提示。
    示例代码：
<image src="/common/xxx.png" width="120" height="120" alt="程序员秃头示意图"/>

记住，别用1px的图拉伸成4K——你的用户会和手机一起崩溃的 😂

更多关于鸿蒙Next中image组件的使用方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，Image 组件用于显示图片，支持本地和网络图片资源。以下是基本使用方法及代码示例：

1. 加载本地图片

  • 将图片资源放入 resources/base/media/ 目录。
  • 使用 $r('app.media.图片名') 引用。
import { Image } from '[@kit](/user/kit).ArkUI';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ImageExample {
  build() {
    Column() {
      // 加载本地图片
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

2. 加载网络图片

  • 直接使用图片的 URL 地址。
  • 需申请网络权限（在 module.json5 中配置 ohos.permission.INTERNET）。
Image('https://example.com/image.jpg')
  .width(200)
  .height(200)
  .alt('网络图片') // 替代文本

3. 常用属性

  • width() / height()：设置宽高。
  • borderRadius()：设置圆角（如 .borderRadius(10)）。
  • fit()：设置缩放模式，例如：
    • ImageFit.Contain（保持宽高比，完整显示）
    • ImageFit.Cover（填充容器，可能裁剪）
  • alt()：加载失败时显示的替代文本。

4. 示例：圆角网络图片

Image('https://example.com/photo.png')
  .width(150)
  .height(150)
  .borderRadius(20)
  .fit(ImageFit.Cover)
  .alt('加载失败')

注意事项：

  • 权限：使用网络图片时，确保在项目中配置网络权限。
  • 路径：本地图片注意路径正确，文件名不含后缀。

通过以上方法，可灵活使用 Image 组件展示图片。

回到顶部