鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Image图片组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1
二、Image组件
Image 用来加载并显示图片的基础组件，它支持从内存、本地和网络加载图片，当从网络加载图片的时候，需要申请网络访问权限。ohos.permission.INTERNET
接口
Image(src: string | PixelMap | Resource)
参数
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| src | string| PixelMap| Resource | 是 | - | 图片的数据源，支持本地图片和网络图片。当使用相对路径引用图片资源时，例如Image("common/test.jpg")，不支持该Image组件被跨包/跨模块调用，建议使用$r方式来管理需全局使用的图片资源。- 支持的图片格式包括png、jpg、bmp、svg和gif。- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。- 支持dataability://路径前缀的字符串，用于访问通过data ability提供的图片路径。 |
属性
名称 | 参数类型 | 默认值 | 描述 |
|---|---|---|---|
| alt | string | Resource | - | 加载时显示的占位图。仅支持本地图片。 |
| objectFit | ImageFit | Cover | 设置图片的缩放类型。 |
| objectRepeat | ImageRepeat | NoRepeat | 设置图片的重复样式。说明：- svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。说明：- svg类型图源不支持该属性。- PixelMap资源不支持该属性。 |
| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。说明：- svg类型图源不支持该属性。 |
| sourceSize | {width: number,height: number} | - | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。说明：- PixelMap资源和SVG图片不支持该属性。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。 |
| fillColor | ResourceColor | - | 仅对svg图源生效，设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 |
| syncLoad8+ | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 |
事件
- onComplete：图片成功加载时触发该回调，返回图片原始尺寸信息。
- onError：图片加载出现异常时触发该回调。
- onFinish：当加载的源文件为带动效的 svg 图片时，当 svg 动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。
三、示例
代码
// @ts-nocheck
@Entry
@Component
struct Index {
// @ts-ignore
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Image($r("app.media.icon")) //本机加载（就是本地的App图标）
.width(180)
.height(180)
.renderMode(ImageRenderMode.Original) // 原图渲染
.onClick(() => { // 通用事件
if (this.src == this.on || this.src == this.off2on) {
this.src = this.on2off
} else {
this.src = this.off2on
}
})
.onComplete((msg: { width: number,height: number }) => {
console.log(msg.width)
console.log(msg.height)
})
.onFinish(() => {
if (this.src == this.off2on) {
this.src = this.on
} else {
this.src = this.off
}
})
Image('https://img.sample.com/imgs/test.png') //加载网络图片
.width(180)
.height(80)
.onError(() => {
console.error('load image fail') //image加载会失败 没申请权限
})
// @ts-ignore
Image(this.pixelMap) // pixelMap为内存图片
.width(180)
.height(80)
}
.width('100%')
}
.height('100%')
}
}
好了就写到这吧！
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。
