HarmonyOS Next快速入门：Image组件

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##

点击跳转《HarmonyOS Next快速入门》视频教程

Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。

例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg、gif和heif。

Image组件数据源

• 本地资源：存放在ets文件夹下，引用根目录ets文件夹下的资源路径即可。
• Resource资源：通过$r资源接口读取并转换到Resource格式。
• 网络资源：引用网络地址，需在module.json5文件中申明网络访问权限ohos.permission.INTERNET。
• 媒体库file://data/storage。支持file://路径前缀的字符串，用于访问通过选择器提供的图片路径。
• 多媒体像素图：PixelMap是图片解码后的像素图，将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上。

图片地址：https://imagepphcloud.thepaper.cn/pph/image/208/499/752.jpg
在module.json5文件中申明网络访问权限：

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

Image组件可显示矢量图（svg格式的图片），使用fillColor属性改变图片的绘制颜色。

.fillColor(value: ResourceColor)

设置缩放类型：objectFit属性

.objectFit(value: ImageFit)

ImageFit枚举类型：

• ImageFit.Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
• ImageFit.Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
• ImageFit.Auto：自适应显示。
• ImageFit.Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
• ImageFit.ScaleDown：保持宽高比显示，图片缩小或者保持不变。
• ImageFit.None：保持原有尺寸显示。

代码实例：ImagePage

@Entry
@Component
struct ImagePage {
  @State message: string = 'Image组件';

  build() {
    Column({space:6}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Image('images/panda.jpg').width(100)

      Image($r('app.media.cat')).width(100)
      Image($r('app.media.cat')).width(100).height(200).objectFit(ImageFit.Fill)

      Image('https://imagepphcloud.thepaper.cn/pph/image/208/499/752.jpg').width("100%")

      Image($r('app.media.add')).width(50).fillColor(Color.Blue)
    }
    .height('100%')
    .width('100%')
  }
}