【鸿蒙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%') 
  }
}