当前位置：首页 > news >正文

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

news 2026/7/13 1:30:21

文章目录

- 前言
- 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)就能显示，不用自己读写文件，系统已经处理好了权限。

常见误区（小白必踩）

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

下面这段代码可以直接复制到 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)}}