Image:图片显示组件
1、声明Image组件并设置图片源:
Image(src: string|PixelMap|Resource)
- string格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNE
Image('https://xxx.png')
- PixelMap格式,可以加载像素图,常用在图片编辑中
Image(pixelMapObject)
- Resource格式,记载本地图片,最常用的,推荐使用
Image($r('app.media.mate60'))
app. -- 固定写法
省略了图片后缀名
Image($rawfile('mate60.png'))
图片后缀名不可省略
2、添加图片属性
Image($r('app.media.icon'))
.width(100) //宽度
.height(120) //高度
.borderRadius //边框圆角
.initerpollation(ImageInterpol.High) //图片插值:像低分辨率的图片一旦放大后会出现锯齿,如果设置了图片插值会把锯齿弥补起来,是清晰度变高
像width、height、borderRadius这些属性在其他组件也可使用,被称为组件通用属性
像initerpollation这种,是组件特有属性
实例
1、string格式
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor('#36D')
.onClick(() =>{
this.message = 'Hello ArkTS'
})
Image('https://tse2-mm.cn.bing.net/th/id/OIP-C.OaAIiK_vhN6wF6uIq5S3ogHaFj?w=231&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7')
.width(250) //默认数字格式有默认的单位vt(虚拟像素:根据设备的像素密度进行换算,确保同样的元素在不同设备上的大小是统一的)
}
.width('100%')
}
.height('100%')
}
}
效果:
为什么没有配置网络权限,还能展示?
原因:这不是一个真正的设备,是一个预览器,如果跑的一个真的设备上就需要配置网络权限
如何跑到一个真实的设备上
- 用一个真实的手机去调试
- 用模拟器
模拟器安装参考以下文档:安装DevEcoStudio - 飞书云文档 (feishu.cn)
模拟器安装完成后,点击右上角的运行部署到模拟器上
发现’Hello World‘已经展示出来,但是通过网络地址写入的图片没有加载进来,原因就是没有配置网络权限
配置网络权限官方教程:访问控制授权申请-快速入门-入门-HarmonyOS应用开发
首先找到module.json5文件
加入上图红框内代码,保存
重新运行实例代码
图片成功加载出来
2、PixelMap格式
Image($r('app.media.icon'))
但是显示出来图片有些模糊,有锯齿,这时候需要设置插值
通过配置下方图片中红框内的代码实现,可以看出图片变清晰了