Hello！我是程序员Feri—— 13 年编程老炮，实战派技术人，拆解编程技巧、分享副业心得，记录程序员的进阶路，AI 时代一起稳稳向前。

在应用开发的世界里，图片就像界面的“表情包”——少了它，再好用的功能也显得干巴巴。今天咱们就来聊聊HarmonyOS里的“图片搬运工”——Image组件，看看它怎么把各种图片“请”到界面上，还能让图片摆出不同姿势～

一、Image组件：你的专属“图片展示架”

Image组件的作用很简单：给图片一个“舞台”，让它在界面上露脸。它支持的图片格式还挺全乎——png、jpg、jpeg、bmp、svg、webp、gif、heif都能搞定，但apng和svga这俩“调皮鬼”暂时不接待哦～

用法也不复杂，基本款长这样：

Image(图片的“老家地址”).属性名(属性值) // 给图片打扮打扮

甚至还能给图片加“点击特效”，比如点一下换张图，像翻相册一样好玩～

二、图片的“老家”在哪？4种寻图秘籍

想让图片上台，得先知道它藏在哪。Image组件有4种“寻图大法”，帮你把图片从不同地方揪出来：

1. 自家相册里的珍藏（项目media文件夹）

项目里自己放的图片，就像存在手机相册里的照片，路径格式是：
$r("app.media.图片名")

比如你在media里放了张叫“startIcon”的图，直接这么写：

Image($r("app.media.startIcon")) // 从自家相册拿图.width(100) // 宽100px.height(100) // 高100px

2. 系统自带的免费素材（系统media库）

系统里藏了些现成的图片，比如图标啥的，不用自己找，直接用：
$r("sys.media.图片名")

比如想拿系统的“AI_phone”图标：

Image($r("sys.media.AI_phone")) // 薅系统的免费素材.width(100).height(100)

3. 深藏不露的资源库（rawfile文件夹）

有些图片喜欢“躲”在rawfile文件夹里，得带上后缀名喊它出来：
$rawfile("图片名.后缀")

比如rawfile里有张“img1.png”：

Image($rawfile("img1.png")) // 从密室里揪出图片.width(100).height(100)

4. 来自远方的网友分享（网络图片）

网上的图片想“请”过来，得给它开个“通行证”——申请网络权限。不然它会被挡在门外哦～

申请通行证步骤：

在module.json5里加一段“求情信”：

"requestPermissions": [  {    "name": "ohos.permission.INTERNET" // 给个上网许可呗～  }]

然后直接写图片的网络地址就行，比如：

Image("https://wx4.sinaimg.cn/mw690/e7db43bbly1ht8lnnq0qij20np0zkwko.jpg").width(200).height(200)

三、图片的“穿搭指南”：objectFit属性

图片和展示框大小不匹配时，就像衣服不合身——要么撑破，要么露半截。这时候objectFit属性就能帮图片“选对衣服”，看看哪款适合它：

举个例子，给图片穿“紧身衣”和“宽松衣”的区别：

// 穿紧身衣：强行塞满，可能变形Image($r("app.media.startIcon")).width(120).height(150).objectFit(ImageFit.Fill).border({width:1, color: Color.Yellow}) // 加个黄边框看得清楚// 穿宽松衣：完整待在框里，不超界Image($r("app.media.startIcon")).width(120).height(150).objectFit(ImageFit.Contain).border({width:1, color: Color.Yellow})

四、互动小彩蛋：点一点换图片

给图片加个点击事件，就能实现“点一下换一张”的效果，像玩翻牌游戏一样～

步骤很简单：

1. 准备一个图片数组，比如放3张图；
2. 用onClick事件，每次点击随机选一个数组索引；
3. 图片就会跟着索引切换啦～

代码示例：

@Entry@Componentstruct Demo3 {  // 图片数组：就像一沓照片  imgs: Resource[] = [    $r("app.media.st"),    $r("app.media.jd"),    $r("app.media.bu")  ]  // 当前显示的照片索引（默认第一张）  @State index: number = 0;  build() {    Column({ space: 20 }) {      // 会变的图片      Image(this.imgs[this.index])        .onClick(() => {          // 点击时随机换一张（Math.random()生成0-1的随机数）          this.index = Math.floor(Math.random() * this.imgs.length);        })        .objectFit(ImageFit.Contain) // 保持完整        .width(300)        .height(300)      // 显示当前是第几张      Text("当前是第" + this.index + "张图")    }    .width('100%')    .height('100%')  }}

总结

Image组件就像一个万能的“图片展示框”——能从本地、系统、网络各种地方找图，还能给图片换“穿搭”，甚至加互动效果。下次开发时，记得用它给你的界面添点“颜值”哦～