Hello！我是程序员Feri—— 13 年编程老炮，实战派技术人，拆解编程技巧、分享副业心得，记录程序员的进阶路，AI 时代一起稳稳向前。 在应用开发的世界里，图片就像界面的“表情包”——少了它，再好用的功能也显得干巴巴。今天咱们就来聊聊HarmonyOS6.0里的“图片搬运工”——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属性就能帮图片“选对衣服”，看看哪款适合它：

穿搭风格	效果说明
Fill（紧身衣）	不管比例硬塞，哪怕变形也要填满框（适合不在乎颜值，只在乎占满的场景）
Contain（宽松衣）	乖乖待在框里，保持比例，再大也不超界（适合想完整看全图的情况）
Cover（霸气装）	占满框，保持比例，但多余部分会被剪掉（适合想突出重点，不怕裁边的场景）
Auto（智能衣）	自动缩放，尽量又满又完整（懒人首选，让系统帮你决定）
None（原尺寸）	不管框多大，我就保持原样（适合图片本身尺寸刚好的情况）
ScaleDown（缩水衣）	只缩小不放大，保持比例（适合图片太大，想缩小点但不变形的场景）

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

// 穿紧身衣：强行塞满，可能变形
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
@Component
struct 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组件就像一个万能的“图片展示框”——能从本地、系统、网络各种地方找图，还能给图片换“穿搭”，甚至加互动效果。

如果大家想考取鸿蒙开发者认证的，欢迎加入我的专属考试链接中：https://developer.huawei.com/consumer/cn/training/classDetail/6ce9d5a998724a849ec634f318107d37?type=1?ha_source=hmosclass&ha_sourceId=89000248

下次开发时，记得用它给你的界面添点“颜值”哦～