鸿蒙开发 展示图片
时间: 2025-07-04 09:18:33 浏览: 9
在鸿蒙系统开发中实现图片展示功能,可以通过 `Image` 组件来完成。该组件支持从本地资源、网络地址或动态生成的图像数据中加载和显示图片[^4]。
### 基本用法
以下是一个基本的示例代码,展示如何使用 `Image` 组件加载一张网络图片:
```ets
@Entry
@Component
struct ImagePage {
@State imageUrl: string = "https://example.com/image.png"
build() {
Column() {
// 显示图片
Image(this.imageUrl)
.width(300)
.height(400)
.margin({ top: 30 })
.borderRadius(8)
.alt($r('app.media.placeholder')) // 使用占位图,在网络图片加载成功前显示
}
.width('100%')
.height('100%')
}
}
```
上述代码中,`Image` 组件通过传入一个 URL 地址来加载图片,并设置了宽度、高度、外边距以及圆角半径等样式属性。`.alt()` 方法用于指定在网络图片加载完成之前显示的占位图[^4]。
### 加载本地资源
如果需要加载本地存储的图片资源,则可以直接使用资源标识符 `$r('app.media.resource_name')` 来引用图片文件:
```ets
Image($r('app.media.local_image'))
.width(200)
.height(200)
```
### 图片混合模式
若希望对图片进行视觉效果上的处理,例如应用不同的混合模式(Blend Mode),可以结合 `blendMode` 属性实现更丰富的视觉呈现[^3]。比如将一张图片作为“挂件”叠加到另一张图片上,并设置其混合方式为 `BlendMode.SRC_OVER` 或其他类型以达到特定的效果:
```ets
Image($r('app.media.overlay_image'))
.width(100)
.height(100)
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
```
### 网络图片下载与保存
对于需要从网络获取并持久化存储的图片,除了展示之外还需调用相关 API 完成下载及保存操作。例如定义一个按钮点击事件触发下载过程,并利用系统提供的接口执行异步请求并写入文件系统[^4]:
```ets
Button('立即下载')
.onClick(() => {
if (this.imageUrl) {
// 调用下载函数
downloadAndSaveImage(this.imageUrl);
}
})
```
以上方法展示了在 HarmonyOS 应用中实现图片展示的基本途径和技术细节,包括了网络图片加载、本地资源引用、混合模式应用以及下载保存等功能。
---
阅读全文
相关推荐


















