文章目录前言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}fromkit.MediaLibraryKitasyncfunctionpickImage():Promisestring{try{constcontextgetContext()constphphotoAccessHelper.getPhotoAccessHelper(context)consturiawaitph.selectUserPhoto(// 调起系统选图photoAccessHelper.PhotoSelectOptions.SINGLE_SELECT)returnuri[0]// 返回选中的图片 URI}catch(e){console.error(选图失败,e)return}}selectUserPhoto是系统级picker用户在自己相册里选不会泄露其他照片。返回的是图片的URI统一资源标识不是文件路径但它可以直接喂给Image。把选中的图显示出来LocalpickedUri:stringbuild(){Column(){if(this.pickedUri){Image(this.pickedUri)// 直接用 URI 当 src.width(200).height(200).objectFit(ImageFit.Cover)}Button(选择图片).onClick(async(){this.pickedUriawaitpickImage()})}}拿到 URI 后直接Image(uri)就能显示不用自己读写文件系统已经处理好了权限。常见误区小白必踩误区说明网络图没申请INTERNETImage加载网络地址必须在module.json5申权限否则图出不来还没报错。objectFit用错导致变形用ImageFit.Cover保持比例裁切Contain会留白按需选。选图用文件路径而非 URI系统 picker 返回的是 URI直接喂给Image即可别自己去读文件路径。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例图片选择与显示调用系统 picker 选图再用 Image 显示。核心代码// 拉起系统相册选择一张图并显示import{photoAccessHelper}fromkit.MediaLibraryKitimport{picker}fromkit.CoreFileKitEntryComponentstruct PickImg{Stateuri:stringbuild(){Column({space:16}){Button(选择图片).onClick(async(){constpnewpicker.PhotoViewPicker()constresawaitp.select({MIMEType:picker.PhotoViewMimeType.IMAGE})if(res.photoUris.length0){this.urires.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 一般不需额外权限但如果你要保存图片到自己沙箱记得申请媒体库写入权限。先把选图→显示跑通再考虑保存。