一.Image组件(图片显示组件)
1.声明Image组件并设置图片源
Image(src:string|PixelMap|Resource).
<1>.string格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image("https://xxx.png")
<2>.PixeMap格式,可以加载像素图,常用在图片编辑中
Image(pixelMapObject)
<3>.Resource格式,加载本地图片,推荐使用
Image($r('.app.media.mate60')) // src/main/resources/base/media文件下面的图片
Image($rawfile("mate60.png")) // src/main/resources/rawfile 文件下面的图片
2.添加图片属性
Image($r('app.media.icon'))
<1>.组件通用属性:
width(100) // 宽度、height(100) // 高度、 borderRadius(10)// 边框圆角
<2>.组件特有属性:
interpolation(interpolation.high) // 图片插值
二.Image组件的使用
1.加载网络图片
@Entry
@Component
struct Index {
@State message: string = '张杰,你好'
build() {
Row() {
Column() {
Image('https://img0.baidu.com/it/u=2182810129,3893533500&fm=253&fmt=auto&app=138&f=JPEG?w=625&h=500')
.width(250)
}
.width('100%')
}
.height('100%')
}
}
网络图片本地视图是可以展示出来的,但是打包到华为手机模拟器上是显示不出来的,这里需要配置权限,参考文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/permission-list-0000001544464017-V3#ZH-CN_TOPIC_0000001523648786__ohospermissioninternet
在 src/main/module.json5中配置
"module": {
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],
}
2.加载本地图片
@Entry
@Component
struct Index {
@State message: string = '张杰,你好'
build() {
Row() {
Column() {
Image($r('app.media.icon'))
.width(250)
.interpolation(ImageInterpolation.High) // 解决图片不清晰问题
}
.width('100%')
}
.height('100%')
}
}