概念
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考加载图片资源。
本地资源
创建文件夹，将本地图片放入ets文件夹下的任意位置。
Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。
@Entry
@Component
struct Eight_1{build(){Column(){//图片存储在ets文件夹下的子文件夹中Image("images/image1.jpg").width("100%")}.width("100%")}
}网络资源
引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Image组件的src参数为网络图片的链接。
@Entry
@Component
struct Eight_2{build(){Column(){//加载网络图片，前提是需要添加网络权限Image("https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280").width("100%")}.width("100%")}
}Resource资源
使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。还可以将图片放在rawfile文件夹下。
@Entry
@Component
struct Eight_3{build(){Column(){//图片存储在resources文件夹下的media或者profile子文件夹中Image($r("app.media.image2")).width("100%")}.width("100%")}
}媒体库file://data/storage
支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。
- 调用接口获取图库的照片url。
import picker from '@ohos.file.picker';@Entry
@Component
struct Eight_4 {@State imgDatas: string[] = [];// 获取照片url集getAllImg() {let result = new Array<string>();try {let PhotoSelectOptions = new picker.PhotoSelectOptions();PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;PhotoSelectOptions.maxSelectNumber = 5;let photoPicker = new picker.PhotoViewPicker();photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {this.imgDatas = PhotoSelectResult.photoUris;console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));}).catch((err) => {console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);});} catch (err) {console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`); }}// aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中async aboutToAppear() {this.getAllImg();}// 使用imgDatas的url加载图片。build() {Column() {Grid() {ForEach(this.imgDatas, item => {GridItem() {Image(item).width(200)}}, item => JSON.stringify(item))}}.width('100%').height('100%')}
}
请求网络图片请求，解码编码PixelMap。
//请求网络图片请求，解码编码PixelMap
import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';
@Entry
@Component
struct Eight_5{//创建PixelMap状态变量@State image: PixelMap = undefined;httpRequest(){//填写网络图片地址http.createHttp().request("https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280",(error, data) => {if (error){console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);} else {//将网络地址成功返回的数据，编码转码成pixelMap的图片格式let code = data.responseCode;if (ResponseCode.ResponseCode.OK === code) {let res: any = data.resultlet imageSource = image.createImageSource(res);let options = {alphaType: 0, // 透明度editable: false, // 是否可编辑pixelFormat: 3, // 像素格式scaleMode: 1, // 缩略值size: { height: 100, width: 100}} // 创建图片大小imageSource.createPixelMap(options).then((pixelMap) => {this.image = pixelMap})}}})}build(){Column(){//显示图片Button("获取网络图片").onClick(() => {this.httpRequest()}).margin(10)Image(this.image).width("100%")}.width("100%")}
}Image组件可显示矢量图（svg格式的图片），支持的svg标签为：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。
通过objectFit属性使图片缩放到高度和宽度确定的框内。
@Entry
@Component
struct Eight_7 {scroller: Scroller = new Scroller()build() {Scroll(this.scroller) {Column(){Image($r('app.media.image2')).width(200).height(150).border({ width: 1 }).objectFit(ImageFit.Contain).margin(15) // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。.overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.image2')).width(200).height(150).border({ width: 1 }).objectFit(ImageFit.Cover).margin(15)// 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。.overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.image2')).width(200).height(150).border({ width: 1 })// 自适应显示。.objectFit(ImageFit.Auto).margin(15).overlay('Auto', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.image2')).width(200).height(150).border({ width: 1 }).objectFit(ImageFit.Fill).margin(15)// 不保持宽高比进行放大缩小，使得图片充满显示边界。.overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.image2')).width(200).height(150).border({ width: 1 })// 保持宽高比显示，图片缩小或者保持不变。.objectFit(ImageFit.ScaleDown).margin(15).overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.image2')).width(200).height(150).border({ width: 1 })// 保持原有尺寸显示。.objectFit(ImageFit.None).margin(15).overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })}.width("100%")}}
}
