企业官网建设流程全解析

一、引言

在鸿蒙应用开发中，图片是构建用户界面不可或缺的元素。本文将详细介绍在HarmonyOS中加载图片的6种方式，从最常用的网络图片和本地自定义目录图片，到系统提供的media、rawfile、系统内置图片以及字体图标图片，帮助开发者全面掌握Image组件的用法。

二、准备工作

首先，我们新建一个空页面。在day01文件夹下右键选择“新建” -> “页面”，创建一个空页面并命名。将页面中的实例代码删除，然后添加Image组件的相关代码。

三、加载网络图片

加载网络图片是最常见的需求。使用Image组件时，只需传递网络图片的URL即可。

Image('https://example.com/image.png').width(200)// 设置图片宽度

通过.width()可以设置图片的显示宽度，网络图片即可成功显示。

四、加载自定义目录图片

第二种方式是加载项目自定义目录中的图片。同样，只需给Image组件传递图片路径。

Image('/static/logo.png').width(200)

操作步骤：

1. 在ets目录下右键选择“新建” -> “目录”。
2. 给目录命名，例如static。
3. 将你的图片文件放入该目录中。

五、加载media目录图片

鸿蒙的resources目录下，base子目录中有一个media文件夹，专门用于存放媒体资源。

5.1 media目录说明

resources/base/media目录下的资源文件会被编译成二进制文件，并赋予资源文件ID。

5.2 加载方式

使用$r()语法来引用media目录中的图片：

Image($r('app.media.my_image')).width(200)

在$r()中输入app.media.后，IDE会自动列出该文件夹下的所有图片资源，选中即可。

六、加载rawfile目录图片

rawfile目录与base目录平级，位于resources/rawfile下。

6.1 rawfile目录说明

• 可以创建多层子目录。
• 文件会被直接打包进应用，不经过编译，也不会被赋予资源文件ID。

6.2 加载方式

使用$rawfile()函数来引用：

Image($rawfile('icon.png')).width(200)

直接在括号内输入图片的文件名（含扩展名）即可。

七、加载系统内置图片

鸿蒙系统内置了一些默认图片资源，方便开发者快速使用。

Image($r('sys.media.ohos_app_icon')).width(200)

使用$r()，输入sys.media.后，IDE会列出系统内置的所有图片，选择即可。

八、加载字体图标图片

字体图标库（如SVG图标）通常也放在media目录中加载。

8.1 加载方式

Image($r('app.media.icon_svg')).width(200)

8.2 注意事项

• 文件名不要包含中文或其他特殊符号，否则可能报错。
• 建议使用拼音或英文命名，如果图片默认使用的中文，可通过右键“重构” -> “重命名”修改。

8.3 修改填充色

对于SVG格式的图片，还可以使用fillColor属性修改其填充颜色：

Image($r('app.media.icon_svg')).width(200).fillColor(Color.Red)// 修改为红色

9. 总结

本文介绍了鸿蒙应用中加载图片的6种方式：

掌握这些方法，你就能在鸿蒙应用中灵活处理各种图片加载需求了。有兴趣的小伙伴可以动手练一练！