1# 图片显示 2 3### 介绍 4 5本示例展示从相册选择图片展示在商品评价页面。 6 7本示例使用 [TextArea](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md) 组件实现多文本输入，使用 [@ohos.multimedia.medialibrary 8](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-medialibrary.md) 实现图片的获取，选择。 9 10### 效果预览 11|主页| 打开相册 | 选中图片 | 发表评价 | 12|--------------------------------|--------------------------------------------|----------------------------------------|--------------------------------------| 13| |  |  |  | 14 15使用说明： 16 171.点击添加图片/照片，页面跳转到图片选择页面。 18 192.进入图片选择页面后，选择需要显示的图片，选择的图片数量会显示在右上方，选择的图片会显示在下方。最多选择6张图片。 20 213.选定图片后点击下一步，页面会跳转回主页面，图片显示在主页。若不确定选择，点击添加图片/照片进行重新选择。 22 234.图片选择后，点击文本输入框，可以对商品进行评价。 24 255.点击返回按钮，退出应用。 26 27### 工程目录 28``` 29entry/src/main/ets/ 30|---Application 31| |---MyAbilityStage.ts 32|---MainAbility 33| |---MainAbility.ts 34|---pages 35| |---Index.ets // 首页 36| |---ChoicePhoto.ets // 添加图片/照片 37``` 38 39### 具体实现 40 41* 本示例分为三个模块： 42 * 发表评价页面模块： 43 * 使用scroll，TextArea，Grid等组件开发发表评价页面 44 * 源码链接：[Index.ets](entry/src/main/ets/pages/Index.ets) 45 * 参考接口：[@ohos.router](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-router.md) 46 47 * 选择图片/照片模块 48 * 调用依赖中ChoicePhotos方法打开相册，mediaquery媒体查询相册，getMediaLibrary获取媒体库的实例，访问用户等个人媒体数据信息并选中图片 49 * 源码链接：[ChoicePhotos.ets](imagelibrary/src/main/ets/components/pages/ChoicePhotos.ets)，[MainAbility.ts](entry/src/main/ets/MainAbility/MainAbility.ts) 50 * 参考接口：[@ohos.router](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-router.md)，[@ohos.promptAction](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md)，[@ohos.mediaquery](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-mediaquery.md)，[@ohos.multimedia.mediaLibrary](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-medialibrary.md)，[@ohos.abilityAccessCtrl](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-ability-kit/js-apis-abilityAccessCtrl.md) 51 52 * 提交模块 53 * 选中图片后点击下一步按钮，回到发表评价页面，点击提交按钮进行提交 54 * 源码链接：[Index.ets](entry/src/main/ets/pages/Index.ets) 55 * 参考接口：[@ohos.router](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-router.md) 56 57### 相关权限 58 59允许应用读取用户外部存储中的媒体文件信息：[ohos.permission.READ_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionread_media) 60 61### 依赖 62 63不涉及 64 65### 约束与限制 66 671.本示例仅支持标准系统上运行，支持设备：RK3568。 68 692.本示例为Stage模型，已适配API version 9版本SDK，版本号：3.2.11.9。 70 713.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)才可编译运行。 72 73### 下载 74 75如需单独下载本工程，执行如下命令： 76``` 77git init 78git config core.sparsecheckout true 79echo code/BasicFeature/Media/ImageShow/ > .git/info/sparse-checkout 80git remote add origin https://gitee.com/openharmony/applications_app_samples.git 81git pull origin master 82 83```
