目录
一、引言：图片加载的重要性
在当今数字化时代，图片已成为应用中不可或缺的元素。无论是电商应用中的商品展示、社交应用中的用户分享，还是资讯应用中的内容配图，图片都以其直观、生动的特点，极大地丰富了应用的内容，提升了用户体验。一张精美的图片能够瞬间吸引用户的注意力，传达复杂的信息，甚至激发用户的情感共鸣 。
在 HarmonyOS 应用开发中，ArkUI 作为重要的开发框架，为开发者提供了强大的图片加载功能。如何高效、稳定地加载图片资源，是每一位 HarmonyOS 开发者都需要掌握的关键技能。接下来，就让我们深入探索 ArkUI 中加载图片资源的奥秘。
二、ArkUI 简介
ArkUI（方舟 UI 框架）是鸿蒙系统应用界面开发的重要支柱 ，为开发者搭建应用界面提供了一整套完备的基础设施。它采用声明式的编程风格，允许开发者以一种更加直观、接近自然语义的方式来描述用户界面的结构和行为。
想象一下，你不再需要一步步详细地告诉程序如何去绘制每个界面元素，而是像描述一幅画一样，直接告诉它界面最终应该呈现出什么样子，ArkUI 会自动完成从描述到实际渲染的复杂过程，极大地提高了开发效率。
在功能层面，ArkUI 拥有丰富多样的特性，涵盖了从基础组件到高级动画、交互等各个方面。它内置了大量的多态组件，像基础的Image（图片）组件用于展示图片，Text（文本）组件用于显示文字内容，Button（按钮）组件提供用户交互的入口等，这些基础组件构成了界面的基本元素。容器组件则能包含一个或多个子组件，方便开发者进行布局管理，比如Column（列布局）和Row（行布局），让组件可以按照垂直或水平方向排列。
布局能力上，ArkUI 不仅保留了经典的弹性布局，以适应不同屏幕尺寸和分辨率的设备，还提供了列表、宫格、栅格布局以及原子布局能力，充分满足各种复杂界面设计在多分辨率场景下的开发需求 ，确保应用在手机、平板、智能手表等不同设备上都能完美适配，呈现出一致且美观的界面效果。
动画方面，ArkUI 同样表现出色，除了组件内置的动画效果，还提供了属性动画，允许开发者对组件的属性，如透明度、位置、大小等进行动画设置，实现更加生动的界面变化；转场动画则为页面或组件之间的切换增添了流畅的过渡效果，增强用户体验；甚至还支持自定义动画，开发者可以发挥创意，打造独一无二的动画效果。
交互事件处理上，ArkUI 默认适配触摸手势、遥控器按键输入、键鼠输入等多种输入方式，并提供相应的事件回调，让开发者可以轻松添加交互逻辑，实现应用与用户之间的良好互动，无论用户通过何种设备与应用交互，都能获得灵敏、便捷的操作体验。
三、加载图片资源的多种方式
在 ArkUI 中，加载图片资源的方式丰富多样，每种方式都有其独特的应用场景和优势，接下来让我们逐一深入了解。
（一）本地资源加载
本地资源加载是一种简单直接的方式，适用于应用内已经存在的静态图片。首先，我们需要在项目的本地文件夹中放置图片。假设我们在ets文件夹下创建了一个名为Images的文件夹，并将图片example.png放入其中。
在代码中引用本地图片路径进行加载时，我们可以使用Image组件，如下所示：
@Entry
@Component
struct Index {
build() {
Column() {
Image('/Images/example.png')
.width(200)
.height(200)
}
}
}
在上述代码中，Image组件的参数为本地图片的相对路径，以ets文件夹为根目录。通过设置width和height属性，我们可以调整图片的显示大小。这种方式加载图片速度快，因为图片已经存在于本地，无需网络请求，适用于一些应用图标、固定背景图等场景 。
（二）网络资源加载
当我们需要加载来自网络的图片时，首先要注意的是，引入网络图片需申请权限ohos.permission.INTERNET。在module.json5文件中，我们可以这样申请权限：
{
"module": {
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}
}
申请权限后，我们就可以在Image组件中传入网络图片链接来加载图片了。例如：
@Entry
@Component
struct Index {
build() {
Column() {
Image('https://example.com/image.jpg')
.width(200)
.height(200)
}
}
}
上述代码中，Image组件的参数为网络图片的链接，只要设备连接到网络，就可以成功加载图片。这种方式适用于展示实时更新的图片，如新闻配图、用户上传的图片等 。不过，网络加载图片可能会受到网络状况的影响，导致加载失败或加载速度慢，因此在实际应用中，我们可能需要添加错误处理和加载进度提示等功能 。
（三）Resource 资源加载
Resource 资源加载方式可以方便地跨包 / 跨模块引入图片。在resources文件夹下，我们可以创建base/media文件夹，将图片放入其中。然后，使用$r资源接口读取图片并转换为Resource格式。例如：
@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.example'))
.width(200)
.height(200)
}
}
}
这里的$r('app.media.example')表示读取resources/base/media文件夹下的example图片（不需要写文件后缀）。这种方式的优势在于便于资源管理和维护，适合应用中大量的静态资源图片 。另外，我们还可以将图片放在rawfile文件夹下，使用$rawfile来加载，如Image($rawfile('example.png')) ，不过需要注意图片路径和文件后缀的正确书写 。
（四）媒体库资源加载
从媒体库获取图片可以让用户展示自己设备上的图片。首先，我们需要调用接口获取图库的照片url。以@ohos.file.picker模块为例：
import picker from '@ohos.file.picker';
@Entry
@Component
struct Index {
@State imgDatas: string[] = [];
// 获取照片url集
getAllImg() {
let result = new Array();
try {
let PhotoSelectOptions = new picker.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 5;
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
this.imgDatas = PhotoSelectResult.photoUris;</
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
