加载图片资源Image支持加载存档图、多媒体像素图和可绘制描述符三种类型。存档图类型数据源存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64。本地资源创建文件夹将本地图片放入ets文件夹下的任意位置。Image组件引入本地图片路径即可显示图片根目录为ets文件夹。不支持跨包、跨模块调用该Image组件。说明从DevEco Studio 6.0.0 Beta2版本开始新建工程或模块时默认创建的模块不会对非resources目录下的资源进行打包需使相关模块build-profile.json5中buildOption resOptions copyCodeResource enable设置为true详见resOptions中copyCodeResource相关介绍。// images/view.jpg需要替换为开发者所需的资源文件Image(images/view.jpg).width(200)LoadingResources.ets加载本地图片过程中如果对图片进行修改或者替换可能会引起应用崩溃。因此需要覆盖图片文件时应该先删除该文件再重新创建一个同名文件。网络资源引入网络图片需申请权限ohos.permission.INTERNET具体申请方式请参考声明权限。此时Image组件的src参数为网络图片的链接。当前Image组件仅支持加载简单网络图片。首次加载网络图片时Image组件需要请求网络资源非首次加载时默认从缓存中直接读取图片。更多图片缓存设置请参考setImageCacheCount、setImageRawDataCacheSize和setImageFileCacheSize。这三个图片缓存接口主要用于支持简单、通用的场景后续不再继续演进且在灵活和扩展性方面存在一定限制例如无法获取当前缓存占用信息。Image组件目前不支持查询磁盘缓存的实时状态包括文件总大小和文件数量。缓存策略不可定制缺乏缓存状态观测能力。开发者无法通过接口感知缓存命中率、淘汰次数等运行时的指标难以基于实际缓存效果进行动态调优。对于复杂情况推荐使用ImageKnife该图像库提供了更灵活、可扩展的缓存策略以及完善的生命周期管理能力更适合复杂业务需求。网络图片必须支持RFC 9113标准否则会导致加载失败。如果下载的网络图片大于10MB或一次下载的网络图片数量较多建议使用HTTP工具提前下载提高图片加载性能方便应用侧管理数据。在显示网络图片时Image组件在机制上会依赖缓存下载模块开发者可参考示例3下载与显示网络gif图片了解具体用法。缓存下载模块提供独立的预下载接口允许应用开发者在创建Image组件前预下载所需图片。组件创建后Image组件可直接从缓存下载模块中获取已下载的图片数据从而加快图片的显示速度优化加载体验并有效避免网络图片加载延迟。网络缓存的位置位于应用根目录下的cache目录中。// $r(app.string.LoadingResources)需要替换为开发者所需的资源文件资源文件中的value值请替换为真实路径Image($r(app.string.LoadingResources))LoadingResources.etsResource资源使用资源格式可以跨包/跨模块引入图片resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。图1 resources调用方式// 请将$r(app.media.icon)替换为实际资源文件Image($r(app.media.icon))LoadingResources.ets还可以将图片放在rawfile文件夹下。图2 rawfile调用方式// $rawfile(example1.png)需要替换为开发者所需的资源文件Image($rawfile(example1.png))LoadingResources.ets媒体库file://data/storage支持file://路径前缀的字符串用于访问通过选择器提供的图片路径。调用接口获取图库的照片url。import { photoAccessHelper } from kit.MediaLibraryKit;import { BusinessError } from kit.BasicServicesKit;import { hilog } from kit.PerformanceAnalysisKit;const DOMAIN 0x0001;const TAG Sample_imagecomponent;EntryComponentstruct MediaLibraryFile {State imgDatas: string[] [];// 使用PhotoViewPicker唤起图片选择器选择图片并且渲染到页面中// 获取照片url集getAllImg() {try {let photoSelectOptions:photoAccessHelper.PhotoSelectOptions new photoAccessHelper.PhotoSelectOptions();photoSelectOptions.MIMEType photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber 5;let photoPicker:photoAccessHelper.PhotoViewPicker new photoAccessHelper.PhotoViewPicker();photoPicker.select(photoSelectOptions).then((photoSelectResult:photoAccessHelper.PhotoSelectResult) {this.imgDatas photoSelectResult.photoUris;hilog.info(DOMAIN, TAG,PhotoViewPicker.select successfully, photoSelectResult uri: JSON.stringify(photoSelectResult));}).catch((err:Error) {let message (err as BusinessError).message;let code (err as BusinessError).code;hilog.info(DOMAIN, TAG,PhotoViewPicker.select failed with. Code: ${code}, message: ${message});});} catch (err) {let message (err as BusinessError).message;let code (err as BusinessError).code;hilog.info(DOMAIN, TAG,PhotoViewPicker failed with. Code: ${code}, message: ${message});};};// aboutToAppear中调用上述函数获取图库的所有图片url存在imgDatas中async aboutToAppear() {this.getAllImg();};// 使用imgDatas的url加载图片build() {Column() {Grid() {ForEach(this.imgDatas, (item:string) {GridItem() {Image(item).width(200)}}, (item:string):string JSON.stringify(item))}}.width(100%).height(100%)}}LoadImageResources.ets从媒体库获取的url格式通常如下。// file://media/Photos/5需要替换为开发者所需的资源文件资源文件中的value值请替换为真实路径Image(file://media/Photos/5).width(200)LoadingResources.etsbase64路径格式为data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data]其中[base64 data]为Base64字符串数据。Base64格式字符串可用于存储图片的像素数据在网页上使用较为广泛。v创建视频组件Video通过调用接口来创建接口调用形式如下Video(value: VideoOptions)加载视频资源Video组件支持加载本地视频和网络视频。具体的数据源配置请参考VideoOptions对象说明。加载本地视频普通本地视频。加载本地视频时需在工程资源的rawfile目录中放置视频文件如下图所示。再使用资源访问符$rawfile()引用视频资源。// xxx.ets// ...Componentexport struct LocalVideo {private controller: VideoController new VideoController();// $r(app.media.preview)需要替换为开发者所需的图像资源文件private previewUris: Resource $r(app.media.preview);// $rawfile(videoTest.mp4)需要替换为开发者所需的影像资源文件private innerResource: Resource $rawfile(videoTest.mp4);build() {Column() {Video({src: this.innerResource, // 设置视频源previewUri: this.previewUris, // 设置预览图controller: this.controller // 设置视频控制器可以控制视频的播放状态})}}}LocalVideo.etsData Ability提供的视频路径带有dataability://前缀使用时确保对应视频资源存在。// xxx.ets// ···Componentexport struct LocalVideoTwo {private controller: VideoController new VideoController();private previewUris: Resource $r(app.media.preview);private videoSrc: string dataability://device_id/com.domainname.dataability.videodata/video/10;build() {Column() {Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})}}}DataAbility.ets加载沙箱路径视频支持file://路径前缀的字符串用于读取应用沙箱路径内的资源需要确保应用沙箱目录路径下的文件存在并且有可读权限。// xxx.ets// ···Componentexport struct Sandbox {private controller: VideoController new VideoController();private videoSrc: string file:///data/storage/el2/base/haps/entry/files/show.mp4;build() {Column() {Video({src: this.videoSrc,controller: this.controller})}}}Sandbox.ets加载网络视频加载网络视频时需要申请ohos.permission.INTERNET权限具体申请方式请参考声明权限。此时Video的src属性为网络视频的链接。// xxx.ets// ···Componentexport struct OnlineVideo {private controller: VideoController new VideoController();private previewUris: Resource $r(app.media.preview);private videoSrc: string www.example.com/example.mp4; // 使用时请替换为实际视频加载网址build() {Column() {Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})}}}OnlineVideo.ets添加属性Video组件属性主要用于设置视频的播放形式。例如设置视频播放是否静音、播放是否显示控制条等。// xxx.ets// ···Componentexport struct AttributeVideo {private controller: VideoController new VideoController();build() {Column() {Video({controller: this.controller}).muted(false) // 设置是否静音.controls(false) // 设置是否显示默认控制条.autoPlay(false) // 设置是否自动播放.loop(false) // 设置是否循环播放.objectFit(ImageFit.Contain) // 设置视频填充模式}}}