ArkUI学习-Image

1、基本使用：

● width：组件宽度，取值数字或百分比
● height：组件高度，取值数字或百分比
● aspectRatio：组件宽高比，宽度/高度

属性	描述
width	宽度（通用属性）
height	高度（通用属性）
aspectRatio	宽高比（通用属性）
alt	加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。
objectFit	设置图片的填充效果。默认值：ImageFit.Cover

//1、使用Resource数据加载图片
Image($r('app.media.bg'))
  .width(300)
  .aspectRatio(2)// aspectRatio：组件宽高比，宽度/高度

//2、使用string数据加载图片
Image('https://inews.gtimg.com/om_bt/O0e2a37GGF5CDfNgK8GU29rF_2eJlHLDsa17LABXns7V4AA/641')
  .width(300)
  .aspectRatio(2)// aspectRatio：组件宽高比，宽度/高度

2、占位图 alt

作用：加载时显示的占位图片

//加载时显示的占位图
Image('https://inews.gtimg.com/om_bt/O0e2a37GGF5CDfNgK8GU29rF_2eJlHLDsa17LABXns7V4AA/641')
  .width(300)
  .aspectRatio(2)// aspectRatio：组件宽高比，宽度/高度
  .alt($r('app.media.bg'))

3、图片填充 objectFit

属性：objectFit 参数类型：枚举 ImageFit ● Contain：图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放） ● Cover：默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放） ● Fill：图片缩放至充满组件（不等比缩放）

Image($r('app.media.cat'))
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
          // 图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）
        .objectFit(ImageFit.Contain)
          // 默认：图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）
        .objectFit(ImageFit.Cover)
          // 图片缩放至充满组件（不等比缩放）
        .objectFit(ImageFit.Fill)