鸿蒙开发Image组件使用|image|spiderlinebreak|圆角|自适应

本地图片展示

 // 可以应用本地资源，比如resources目录下media资源
        // 可以使用网络图片，图片地址
        Image($r('app.media.icon_fire'))
          .width(100) // 图片宽
          .height(100) // 图片高

网络图片展示

Image('https://t11.baidu.com/it/u=3810475611,208128262&fm=30&app=106&f=JPEG?w=640&h=478&s=6951A946954215F578CFA11B03008093')
          .width(100)
          .height(100)
          .objectFit(ImageFit.Contain)

图片的缩放模式

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

圆角图片

常见用于展示用户头像等场景。

Image('https://t11.baidu.com/it/u=3810475611,208128262&fm=30&app=106&f=JPEG?w=640&h=478&s=6951A946954215F578CFA11B03008093')
          .width(100) // 图片宽
          .height(100) // 图片高
          // 图片的填充方式
          .objectFit(ImageFit.Fill)
          .aspectRatio(1) // 宽高比
          .borderRadius(50) // 设置图片圆角