---

---

个人名片：

🐼作者简介：一名大三在校生，喜欢AI编程🎋
🐻‍❄️个人主页🥇：落798.
🐼个人WeChat：hmmwx53
🕊️系列专栏：🖼️

• 零基础学Java——小白入门必备
• 重识C语言——复习回顾
• 计算机网络体系———深度详讲
• HCIP数通工程师-刷题与实战
• 微信小程序开发——实战开发
• HarmonyOS 4.0 应用开发实战——实战开发
  🐓每日一句：🍭我很忙，但我要忙的有意义！
  欢迎评论 💬点赞👍🏻 收藏 📂加关注+

---

---

---

ArkTS 快速入门之常用组件

常用组件

图片

概述
Image为图片组件，用于在应用中显示图片。
参数
Image组件的参数类型为string | Resource | media.PixelMap，相关案例见Demos/entry/src/main/ets/pages/component/image/parameter/solution/ImageParameter.ets。
下面对三种参数类型逐一进行介绍。
string类型
string类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。

• 本地图片

Image('images/demo.jpg')

注意：使用这种方式引入本地图片，需要将图片置于ets目录下，并且需要为Image组件提供图片相对于ets目录的路径。

• 网络图片

Image('http://xxx/xxx.jpg')

注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。权限配置相关的内容在后续章节会系统介绍。

● Resource类型
Resource类型的参数用于引入 resources 目录下的图片。
resources目录用于统一存放应用所需的各种资源，包括图片、音频、视频、文本等等。下面简要介绍 resources 目录的用法，首先需要了解 resources 的目录结构，如下

resources 目录下，用于存放资源的子目录有（element、media、profile）和rawfile。下面分别介绍

• element、media、profile

（element、media、profile）可存在多种版本，用于适配不同的环境，例如语言环境（zh_CN和en_US）、系统主题（dark和light）、设备类型（phone 和 tablet） 等等。我们可以为上述每种环境各自准备一套资源文件，每种环境对应 resources 下的一个目录，例如上述的 zh_CN 和 en_US。我们在使用resources下的资源时，无需指定具体的环境版本，系统会根据设备所处的环境自动选择匹配的版本，例如当设备系统语言为中文时，则会使用zh_CN目录下的资源，为英文时，则会使用en_US目录下的资源。若没有与当前所处环境相对应的版本，则使用 base 目录下资源。

各目录存储的具体资源如下
● media
存放媒体资源，包括图片、音频、视频等文件。
● element
存放用于描述页面元素的尺寸、颜色、样式等的各种类型的值，每种类型的值都定义在一个相应的 JSON 文件中。
● profile
存放自定义配置文件。

• rawfile
  用于存储任意格式的原始文件，需要注意的是rawfile不会根据设备所处的环境去匹配不同的资源。

总结：

resources目录下可用于存放图片的目录有resources/*/media 以及 resources/rawfile，两个目录下图片的使用方式有所不同，下面逐一介绍

media目录

该目录下的资源，需要使用$r('app.media.<filename>')的方式引用。

注意：无需指定具体版本，系统会自动根据所处环境选择相应版本

例如上图中的img.png图片，可通过$r('app.media.img')引用。需要注意的是$r()的返回值即为‘Resource‘类型，因此可以直接将‘$r(‘app.media.img’)作为 Image 组件的参数，例如Image($r(‘app.media.img’))`。

rawfile目录

该目录下的资源，可通过$rawfile('path/to/your/file')的方式引用，文件的路径为相对于 rawfile 的路径。例如上图中的icon.png，须使用$rawfile('icon.png)引用。需要注意的是，$rawfile()的返回值也是Resource类型，因此其也可以直接作为 Image 组件的参数，如Image($rawfile('icon.png))。

● media.PixelMap
PixelMap指的是图片的像素位图，其通常是一个二维数组，数组中的每个元素对应着图片中的一个像素，其包含了该像素的颜色等信息。像素位图主要用于图片编辑的场景，例如

---

---

欢迎添加微信，加入我的核心小队，请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇