【鸿蒙4.0】ArkUI组件-Image

一.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%') 
  }
}

你可能感兴趣的:(鸿蒙系统,前端,harmonyos,华为,typescript)