当前位置：首页 > news >正文

3.ArkUI Image的介绍和使用

news 来源：原创 2025/4/25 10:33:28

ArkUI Image 组件详解与使用指南

Image 是 ArkUI 中用于显示图片资源的组件，支持多种图片格式和显示模式。以下是 Image 组件的详细介绍和使用方法。

基本介绍

Image 组件特点：

支持本地图片和网络图片
提供多种图片缩放和裁剪模式
支持图片加载状态处理
可以实现图片动画效果

基本使用

1. 加载本地图片

@Entry
@Component
struct LocalImageExample {build() {Column() {// 加载resources目录下的图片Image($r('app.media.logo')).width(100).height(100)// 加载rawfile目录下的图片Image('common/background.png').width(200).height(200)}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

2. 加载网络图片

@Entry
@Component
struct NetworkImageExample {private imageUrl: string = 'https://example.com/image.jpg'build() {Column() {Image(this.imageUrl).width(200).height(200).alt('示例图片') // 图片加载失败时显示的替代文本}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

图片显示控制

1. 图片缩放模式

Column() {// 保持宽高比缩放，完整显示图片Image($r('app.media.example')).width(200).height(100).objectFit(ImageFit.Contain).border({ width: 1, color: Color.Black })// 保持宽高比缩放，填充满容器，可能裁剪图片Image($r('app.media.example')).width(200).height(100).objectFit(ImageFit.Cover).border({ width: 1, color: Color.Black })// 拉伸图片填满容器，可能变形Image($r('app.media.example')).width(200).height(100).objectFit(ImageFit.Fill).border({ width: 1, color: Color.Black })
}

2. 图片重复模式

Image($r('app.media.pattern')).width(300).height(150).objectFit(ImageFit.None).objectRepeat(ImageRepeat.XY) // XY方向重复.border({ width: 1, color: Color.Black })

3. 图片圆角与边框

Image($r('app.media.avatar')).width(100).height(100).borderRadius(50) // 圆形图片.border({ width: 2, color: Color.White }).shadow({ radius: 5, color: Color.Gray, offsetX: 2, offsetY: 2 })

高级功能

1. 图片加载状态处理

@State isLoading: boolean = true
@State loadError: boolean = falsebuild() {Column() {if (this.isLoading) {Progress().width(100).height(100)} else if (this.loadError) {Text('图片加载失败').fontSize(16)} else {Image('https://example.com/image.jpg').width(200).height(200).onComplete(() => {this.isLoading = falsethis.loadError = false}).onError(() => {this.isLoading = falsethis.loadError = true})}}
}

2. 图片滤镜效果

Image($r('app.media.photo')).width(200).height(200).filter(new ImageFilter(new ColorFilter(ColorFilterType.Grayscale, // 灰度滤镜1.0 // 滤镜强度)))

3. 图片动画

@State rotateAngle: number = 0build() {Image($r('app.media.icon')).width(100).height(100).rotate({ angle: this.rotateAngle }).onClick(() => {animateTo({duration: 1000,curve: Curve.EaseInOut}, () => {this.rotateAngle += 360})})
}

性能优化

1. 图片缓存

Image('https://example.com/image.jpg').width(200).height(200).cache(true) // 启用图片缓存

2. 图片懒加载

LazyForEach(this.imageList, (item: ImageItem) => {ListItem() {Image(item.url).width(200).height(200).objectFit(ImageFit.Cover)}
}, (item: ImageItem) => item.id)

3. 图片尺寸优化

// 对于大图，使用缩略图或合适尺寸
Image('https://example.com/large-image.jpg').width(200) // 指定显示尺寸.height(200).interpolation(ImageInterpolation.High) // 高质量缩放

最佳实践

合理选择图片格式：
- PNG：需要透明通道的图片
- JPEG：照片类图片
- WebP：更小的文件大小
使用适当尺寸的图片：
- 避免加载远大于显示尺寸的图片
- 为不同分辨率设备提供多套资源
处理加载状态：
- 显示加载指示器
- 提供错误处理
优化网络图片：
- 使用CDN加速
- 考虑实现图片懒加载
内存管理：
- 及时释放不再使用的图片资源
- 对于列表中的图片，考虑使用回收机制

实际应用示例

1. 图片画廊

@Entry
@Component
struct ImageGallery {private images: string[] = [$r('app.media.photo1'),$r('app.media.photo2'),$r('app.media.photo3'),// 更多图片...]@State currentIndex: number = 0build() {Column() {// 大图展示Image(this.images[this.currentIndex]).width('90%').height(300).objectFit(ImageFit.Cover).margin(10)// 缩略图列表Scroll() {Row() {ForEach(this.images, (image, index) => {Image(image).width(80).height(80).objectFit(ImageFit.Cover).margin(5).onClick(() => {this.currentIndex = index})})}.padding(10)}.height(100)}}
}

2. 头像显示

@Entry
@Component
struct UserProfile {private user = {name: '张三',avatar: 'https://example.com/avatar.jpg'}@State loadError: boolean = falsebuild() {Column() {if (this.loadError) {// 头像加载失败时显示默认图标Image($r('app.media.default_avatar')).width(100).height(100).borderRadius(50)} else {Image(this.user.avatar).width(100).height(100).borderRadius(50).onError(() => {this.loadError = true})}Text(this.user.name).fontSize(18).margin({ top: 10 })}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}