鸿蒙通用组件Image简介
- 图片----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) // 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
图片支持三种引用方式
- 本地图片
Image('images/demo.png')
- 网络图片（展示网络图片需要配置网络权限）
Image(‘https://www.xxx.png’)
- 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 低质量插值。
