2024/4/6 HarmonyOS学习笔记-图片组件

Image组件

1、作用：

渲染并展示图片，支持本地和网络图片。
Image($r(‘app.media.logo’)).width(78).height(78)

2、图片数据源

（1）string数据源：

适用于网络图片和本地图片
使用网络图片时需要在module.json5文件中添加网络访问权限：
“module”: {
“requestPermissions”: [
{“name”: “ohos.permission.INTERNET”}
]
}

（2）PixelMap数据源

图像像素类：需要创建pixelMapObject对象，用于读取或写入图像数据以及获取图像信息
Image(pixelMapObject);

（3）Resources数据源

本地图片路径：图片保存在resources.base.media路径下
Image($r(‘app.media.photoName’))

3、图片宽度设置-以像素为单位

number：Image(“”).width(100);
string：Image(“”).width(“100vp”)
Resources资源引用类型：
用于设置组件属性值
第一步：在resources.element文件夹下的float.json文件中定义图片宽高
{
“float”: [
{
“name”: “logo_image_size”,
“value”: “78vp”
}
]
}
第二步：Image(“”)
.width( $r(“app.float.logo_image_size”))
.height( $r(“app.float.logo_image_size”))