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

前言

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

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

Image 显示本地与网络图

// 显示资源目录图片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，否则图出不来。

圆角与边框组合

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

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

调起相册选图

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

代码实现

import{photoAccessHelper}from'@kit.MediaLibraryKit'asyncfunctionpickImage():Promise<string>{try{constcontext=getContext()constph=photoAccessHelper.getPhotoAccessHelper(context)consturi=awaitph.selectUserPhoto(// 调起系统选图photoAccessHelper.PhotoSelectOptions.SINGLE_SELECT)returnuri[0]// 返回选中的图片 URI}catch(e){console.error('选图失败',e)return''}}

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

把选中的图显示出来

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

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

常见误区（小白必踩）

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

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

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

核心代码

// 拉起系统相册选择一张图并显示import{photoAccessHelper}from'@kit.MediaLibraryKit'import{picker}from'@kit.CoreFileKit'@Entry@Componentstruct PickImg{@Stateuri:string=''build(){Column({space:16}){Button('选择图片').onClick(async()=>{constp=newpicker.PhotoViewPicker()constres=awaitp.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 一般不需额外权限，但如果你要保存图片到自己沙箱，记得申请媒体库写入权限。先把"选图→显示"跑通，再考虑保存。