这是一个使用鸿蒙技术开发的本地原生记账应用，非常适合大家用来练手。相关源码已上传至 Github，点击此处查看项目。欢迎大家交流、指正，也欢迎提交 PR。
一、引言
在鸿蒙应用开发中，图片是构建用户界面不可或缺的元素。本文将详细介绍在HarmonyOS中加载图片的6种方式，从最常用的网络图片和本地自定义目录图片，到系统提供的media、rawfile、系统内置图片以及字体图标图片，帮助开发者全面掌握Image组件的用法。
二、准备工作
首先，我们新建一个空页面。在day01文件夹下右键选择"新建" -> "页面"，创建一个空页面并命名。将页面中的实例代码删除，然后添加Image组件的相关代码。
三、加载网络图片
加载网络图片是最常见的需求。使用Image组件时，只需传递网络图片的URL即可。
typescript
Image('https://example.com/image.png')
.width(200) // 设置图片宽度通过.width()可以设置图片的显示宽度，网络图片即可成功显示。
四、加载自定义目录图片
第二种方式是加载项目自定义目录中的图片。同样，只需给Image组件传递图片路径。
typescript
Image('/static/logo.png')
.width(200)操作步骤：
- 在
ets目录下右键选择"新建" -> "目录"。 - 给目录命名，例如
static。 - 将你的图片文件放入该目录中。
五、加载media目录图片
鸿蒙的resources目录下，base子目录中有一个media文件夹，专门用于存放媒体资源。
5.1 media目录说明
resources/base/media目录下的资源文件会被编译成二进制文件，并赋予资源文件ID。
5.2 加载方式
使用$r()语法来引用media目录中的图片：
typescript
Image($r('app.media.my_image'))
.width(200)在$r()中输入app.media.后，IDE会自动列出该文件夹下的所有图片资源，选中即可。
六、加载rawfile目录图片
rawfile目录与base目录平级，位于resources/rawfile下。
6.1 rawfile目录说明
- 可以创建多层子目录。
- 文件会被直接打包进应用，不经过编译，也不会被赋予资源文件ID。
6.2 加载方式
使用$rawfile()函数来引用：
typescript
Image($rawfile('icon.png'))
.width(200)直接在括号内输入图片的文件名（含扩展名）即可。
七、加载系统内置图片
鸿蒙系统内置了一些默认图片资源，方便开发者快速使用。
typescript
Image($r('sys.media.ohos_app_icon'))
.width(200)使用$r()，输入sys.media.后，IDE会列出系统内置的所有图片，选择即可。
八、加载字体图标图片
字体图标库（如SVG图标）通常也放在media目录中加载。
8.1 加载方式
typescript
Image($r('app.media.icon_svg'))
.width(200)8.2 注意事项
- 文件名不要包含中文或其他特殊符号，否则可能报错。
- 建议使用拼音或英文命名，如果图片默认使用的中文，可通过右键"重构" -> "重命名"修改。
8.3 修改填充色
对于SVG格式的图片，还可以使用fillColor属性修改其填充颜色：
typescript
Image($r('app.media.icon_svg'))
.width(200)
.fillColor(Color.Red) // 修改为红色9. 总结
本文介绍了鸿蒙应用中加载图片的6种方式：
| 加载方式 | 关键API | 适用场景 |
|---|---|---|
| 网络图片 | Image('url') |
加载远程资源 |
| 自定义目录 | Image('/path') |
加载项目内自定义资源 |
| media目录 | $r('app.media.xxx') |
需要资源ID管理的场景 |
| rawfile目录 | $rawfile('name') |
需要保持文件原始格式 |
| 系统内置 | $r('sys.media.xxx') |
快速使用系统默认图标 |
| 字体图标 | $r('app.media.xxx') + fillColor |
图标库应用 |
掌握这些方法，你就能在鸿蒙应用中灵活处理各种图片加载需求了。有兴趣的小伙伴可以动手练一练！