鸿蒙应用开发：6种图片加载方式详解

文章目录一、引言二、准备工作三、加载网络图片四、加载自定义目录图片五、加载media目录图片5.1 media目录说明5.2 加载方式六、加载rawfile目录图片6.1 rawfile目录说明6.2 加载方式七、加载系统内置图片八、加载字体图标图片8.1 加载方式8.2 注意事项8.3 修改填充色9. 总结一、引言在鸿蒙应用开发中图片是构建用户界面不可或缺的元素。本文将详细介绍在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)操作步骤在ets目录下右键选择“新建” - “目录”。给目录命名例如static。将你的图片文件放入该目录中。五、加载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种方式加载方式关键API适用场景网络图片Image(url)加载远程资源自定义目录Image(/path)加载项目内自定义资源media目录$r(app.media.xxx)需要资源ID管理的场景rawfile目录$rawfile(name)需要保持文件原始格式系统内置$r(sys.media.xxx)快速使用系统默认图标字体图标$r(app.media.xxx)fillColor图标库应用掌握这些方法你就能在鸿蒙应用中灵活处理各种图片加载需求了。有兴趣的小伙伴可以动手练一练