【鸿蒙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@ComponentstructIndex { 
@Statemessage: 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%') 
  }
}

网络图片本地视图是可以展示出来的，但是打包到华为手机模拟器上是显示不出来的，这里需要配置权限，参考文档：链接

在 src/main/module.json5中配置

"module": {
"requestPermissions": [
      {
"name": "ohos.permission.INTERNET"      }
    ],
}

2.加载本地图片

@Entry@ComponentstructIndex { 
@Statemessage: string='张杰，你好'build() { 
Row() {
Column() { 
Image($r('app.media.icon'))
          .width(250)
          .interpolation(ImageInterpolation.High) // 解决图片不清晰问题      }
      .width('100%') 
    }
    .height('100%') 
  }
}