鸿蒙Next中image asset如何使用

在鸿蒙Next开发中，如何使用image asset功能？具体操作步骤是什么？需要配置哪些参数？有没有相关的代码示例可以参考？

2 回复

鸿蒙Next里用图片？简单！在resources/base/media里扔图片，然后在代码里用$r('app.media.your_image')调用就行。记得图片别太大，不然应用胖成球！

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


在鸿蒙Next（HarmonyOS NEXT）中，image asset 用于管理应用中的图片资源。以下是基本使用方法：

1. 放置图片资源

将图片文件（如 PNG、JPG）放入项目的 resources/base/media/ 目录下。支持按分辨率放置（如 media/ldpi/, media/hdpi/）。

2. 引用图片资源

在 UI 布局或代码中通过资源 ID 引用图片：

  • 在 ets 文件中（ArkTS 代码）：
    Image($r('app.media.icon')) // 引用 resources/base/media/icon.png
  .width(100)
  .height(100)
  • 在 hml 文件中（声明式 UI）（如果使用）：
    <image src="{{ $media('icon') }}"></image>

3. 动态获取资源

通过 ResourceManager API 动态获取：

import resourceManager from '@ohos.resourceManager';

// 获取资源对象
let resource = resourceManager.getResourceManager();
// 获取图片资源（返回 PixelMap）
resource.getMediaContent($r('app.media.icon').id)
  .then(pixelMap => {
    // 使用 pixelMap 处理图片
  });

4. 注意事项

  • 资源名称需合法（仅允许字母、数字、下划线）。
  • 支持多分辨率适配，系统会根据设备自动选择合适图片。
  • 可通过 $rawfile 访问 resources/rawfile/ 目录下的原始文件（不进行分辨率转换）。

示例：完整组件

@Entry
@Component
struct ImageExample {
  build() {
    Column() {
      Image($r('app.media.logo'))
        .width(120)
        .height(120)
    }
    .padding(20)
  }
}

通过以上步骤即可在鸿蒙Next中正确使用图片资源。

回到顶部