HarmonyOS7 图片处理：Image 组件与图片选择

文章目录

- 前言
- [Image 显示本地与网络图](#Image 显示本地与网络图)
- 圆角与边框组合
- 调起相册选图
- - 代码实现
- 把选中的图显示出来
- 常见误区（小白必踩）
- 完整可运行示例：图片选择与显示
- - 核心代码
- 写在最后

前言

图片是 app 里最常见的内容形态：头像、商品图、用户发的图。HarmonyOS 的 Image 组件能力很强，从显示、裁剪、圆角到加载网络图都能搞定。

这篇文章分两块：一是 Image 组件的常用玩法（圆角、缩放、占位），二是怎么调起系统相册选图并拿到本地路径。两块都是日常刚需。

Image 显示本地与网络图

typescript 复制代码

// 显示资源目录图片
Image($r('app.media.avatar'))
  .width(80)
  .height(80)
  .borderRadius(40)        // 圆形头像
  .objectFit(ImageFit.Cover)

// 显示网络图片
Image('https://example.com/p.jpg')
  .width('100%')
  .height(200)
  .objectFit(ImageFit.Cover)
  .alt($r('app.media.placeholder'))   // 加载中的占位图

要点：

$r('app.media.xxx') 引用 resources 下的图片资源。
.borderRadius(40) 配正方形尺寸就是圆形头像。
.objectFit(ImageFit.Cover)：保持比例裁切填充，不会变形（比 Contain 常用）。
.alt(...)：网络图加载出来前显示的占位，体验更友好。

网络图权限提醒：用 Image 加载网络地址，必须在 module.json5 申请 ohos.permission.INTERNET，否则图出不来。

圆角与边框组合

typescript 复制代码

Image($r('app.media.photo'))
  .width(120)
  .height(120)
  .borderRadius(12)
  .border({ width: 2, color: '#FFFFFF' })   // 白边
  .objectFit(ImageFit.Cover)

白边 + 圆角 + 裁切，是"卡片图片"的标准配方，直接抄。

调起相册选图

选图要用 photoAccessHelper（媒体库管理）。核心是先拿权限、再拉起 picker。

代码实现

typescript 复制代码

import { photoAccessHelper } from '@kit.MediaLibraryKit'

async function pickImage(): Promise<string> {
  try {
    const context = getContext()
    const ph = photoAccessHelper.getPhotoAccessHelper(context)
    const uri = await ph.selectUserPhoto(            // 调起系统选图
      photoAccessHelper.PhotoSelectOptions.SINGLE_SELECT
    )
    return uri[0]   // 返回选中的图片 URI
  } catch (e) {
    console.error('选图失败', e)
    return ''
  }
}

selectUserPhoto 是系统级picker，用户在自己相册里选，不会泄露其他照片。
返回的是图片的 URI （统一资源标识），不是文件路径，但它可以直接喂给 Image。

把选中的图显示出来

typescript 复制代码

@Local pickedUri: string = ''

build() {
  Column() {
    if (this.pickedUri) {
      Image(this.pickedUri)            // 直接用 URI 当 src
        .width(200).height(200).objectFit(ImageFit.Cover)
    }
    Button('选择图片')
      .onClick(async () => {
        this.pickedUri = await pickImage()
      })
  }
}

拿到 URI 后直接 Image(uri) 就能显示，不用自己读写文件，系统已经处理好了权限。

常见误区（小白必踩）

误区	说明
网络图没申请 `INTERNET`	`Image` 加载网络地址必须在 `module.json5` 申权限，否则图出不来还没报错。
`objectFit` 用错导致变形	用 `ImageFit.Cover` 保持比例裁切，`Contain` 会留白，按需选。
选图用文件路径而非 URI	系统 picker 返回的是 URI，直接喂给 `Image` 即可，别自己去读文件路径。

下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲，改一改文末「动手改一改」里的参数，亲眼看看效果。

完整可运行示例：图片选择与显示

调用系统 picker 选图，再用 Image 显示。

核心代码

typescript 复制代码

// 拉起系统相册选择一张图并显示
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { picker } from '@kit.CoreFileKit'

@Entry
@Component
struct PickImg {
  @State uri: string = ''
  build() {
    Column({ space: 16 }) {
      Button('选择图片').onClick(async () => {
        const p = new picker.PhotoViewPicker()
        const res = await p.select({ MIMEType: picker.PhotoViewMimeType.IMAGE })
        if (res.photoUris.length > 0) {
          this.uri = res.photoUris[0]   // 拿到图片 URI
        }
      })
      if (this.uri) {
        Image(this.uri).width(200).height(200).objectFit(ImageFit.Cover)
      }
    }.padding(20)
  }
}

你会看到什么：点按钮拉起系统相册，选一张图后，它显示在下方 200×200 的方框里。

动手改一改：

把 objectFit(ImageFit.Cover) 改成 ImageFit.Contain，看缩放差异。
多选：把 select 的 maxSelectNumber 设为 3，循环显示多张。
给 Image 加 .borderRadius(12)，做出圆角头像效果。

写在最后

图片处理就两块：显示侧 靠 Image 的圆角/裁切/占位三件套；选择侧 靠 photoAccessHelper 的 selectUserPhoto 拿 URI。两者配合，头像上传、发图、商品图编辑都能做。

提醒：涉及相册读取，除了 INTERNET，选图本身走系统 picker 一般不需额外权限，但如果你要保存图片到自己沙箱，记得申请媒体库写入权限。先把"选图→显示"跑通，再考虑保存。