HarmonyOS Next快速入门：Image组件
原创
HarmonyOS Next快速入门：Image组件
原创
中雨
修改于 2025-07-04 12:16:07
修改于 2025-07-04 12:16:07
[##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##]
Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。
例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg、gif和heif。
Image组件数据源
- 本地资源：存放在ets文件夹下，引用根目录ets文件夹下的资源路径即可。
- Resource资源：通过$r资源接口读取并转换到Resource格式。
- 网络资源：引用网络地址，需在module.json5文件中申明网络访问权限ohos.permission.INTERNET。
- 媒体库file://data/storage。支持file://路径前缀的字符串，用于访问通过选择器提供的图片路径。
- 多媒体像素图：PixelMap是图片解码后的像素图，将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上。
图片地址：https://imagepphcloud.thepaper.cn/pph/image/208/499/752.jpg
在module.json5文件中申明网络访问权限：
{
"module" : {
"requestPermissions":[
{
"name": "ohos.permission.INTERNET"
}
]
}
}Image组件可显示矢量图（svg格式的图片），使用fillColor属性改变图片的绘制颜色。
.fillColor(value: ResourceColor)设置缩放类型：objectFit属性
.objectFit(value: ImageFit)ImageFit枚举类型：
- ImageFit.Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
- ImageFit.Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
- ImageFit.Auto：自适应显示。
- ImageFit.Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
- ImageFit.ScaleDown：保持宽高比显示，图片缩小或者保持不变。
- ImageFit.None：保持原有尺寸显示。
代码实例：ImagePage
@Entry
@Component
struct ImagePage {
@State message: string = 'Image组件';
build() {
Column({space:6}) {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Image('images/panda.jpg').width(100)
Image($r('app.media.cat')).width(100)
Image($r('app.media.cat')).width(100).height(200).objectFit(ImageFit.Fill)
Image('https://imagepphcloud.thepaper.cn/pph/image/208/499/752.jpg').width("100%")
Image($r('app.media.add')).width(50).fillColor(Color.Blue)
}
.height('100%')
.width('100%')
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
