鸿蒙通用组件Image简介

图片----Image

Image主要用于在应用中展示图片

Image($r('app.media.app_icon'))
        .width(150) // 设置宽
        .height(150) // 设置高
        .objectFit(ImageFit.Auto) // 图片缩放模式
        .alt($r('app.media.app_icon')) // 加载时显示的占位图，支持本地图片 API9开始支持
        .objectRepeat(ImageRepeat.NoRepeat) // 设置图片的重复样式
        .interpolation(ImageInterpolation.High) // 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。

图片支持三种引用方式

1. 本地图片

Image('images/demo.png')

2. 网络图片（展示网络图片需要配置网络权限）

Image(‘https://www.xxx.png’)

3. Resource资源图片

Image($r('app.media.app_icon'))

设置图片宽高

图⽚尺⼨可通过 width() ⽅法和 height() ⽅法进⾏设置。

 .width(150) // 设置宽
 .height(150) // 设置高

可是设置为具体的宽高尺寸，或者使用百分比的形式设定

 .width(‘100%’) // 设置宽
 .height(‘100%’) // 设置高

设置图片缩放模式

可使用objectFit方式来进行设定图片的缩放模式。
ImageFit支持以下几种类型：

ImageFit.None 保持原有尺⼨显示，不做任何缩放，超出显示区域的部分不显示。
ImageFit.Contain 保持宽⾼⽐进⾏缩⼩或者放⼤，使得显示区域刚好包含整个图⽚。
ImageFit.Cover 保持宽⾼⽐进⾏缩⼩或者放⼤，使得图⽚刚好完全覆盖显示区域。
ImageFit.Fill 不保持宽⾼⽐进⾏放⼤缩⼩，使得图⽚充满显示区域。
ImageFit.ScaleDown 保持宽⾼⽐进⾏缩⼩或不变（不会放⼤），使得图⽚完全显示在显示区域
ImageFit.Auto ⾃适应显示

设置图片占位图

.alt($r('app.media.app_icon')) // 加载时显示的占位图，支持本地图片 API9开始支持

设置图片重复样式

在图片没有占满整个空间的时候，可设置重复模式，让图片铺满整个空间。默认为NoRepeat

ImageRepeat.NoRepeat 不铺满整个空间
ImageRepeat.X X轴铺满整个空间
ImageRepeat.Y Y轴铺满整个空间
ImageRepeat.XY 铺满整个空间

设置图片插值效果

为了解决低分辨率的图片被放大时，图片会出现锯齿状的模糊效果，需要设置差值效果，让图片更清晰。

.interpolation(ImageInterpolation.High) // 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。

ImageInterpolation.None 不使⽤图⽚插值。
ImageInterpolation.High ⾼质量插值，可能会影响图⽚渲染的速度。
ImageInterpolation.Medium 中质量插值。
ImageInterpolation.Low 低质量插值。