说明
该组件从API Version 7 开始支持
使用网络图片时,需要申请ohos.permission.INTERNET
参数
必填
src 图片的数据源,支持本地图片和网络图片
不支持跨包跨模块调用该Image组件,建议使用$r方式来管理需全局使用的图片资源。
属性
alt 加载时显示的占位图，支持本地图片
objectFit 设置图片的缩放类型。默认值: ImageFit.CoverImageFit.Cover 放大图片以适应容器,可能会裁剪ImageFit.Contain缩放图片以适应容器,可能存在空白ImageFit.Fill 图片拉伸以填充容器,可能会出现失真ScaleDown 图片按比例缩小以适应边界,但是不会放大图片Auto 自适应显示None 不进行任何缩放操作,即使图片溢出容器也不会被裁剪或缩放
objectRepeat 设置图片的重复样式。默认值: ImageRepeat.NoRepeatImageRepeat.NoRepeat 不重复图片ImageRepeat.X 横向重复图片ImageRepeat.Y 纵向重复图片ImageRepeat.XY 横纵重复图片
interpolation 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值Low、Medium、High
renderMode 设置图片渲染的模式imageRenderMode.Original 原图渲染imageRenderMode.Template 只保留灰度
sourceSize 设置图片裁剪尺寸，将原始图片解码成pixelMap,指定尺寸的图片
matchTextDirection 设置图片是否跟随系统语言方向
fitOriginalSize 图片组件尺寸未设置时，是否原尺寸显示
fillColor 填充颜色，仅对svg图片生效,默认false
autoResize 对图源做resize操作，默认true
syncLoad 设置是否同步加载图片,默认false
copyOption 设置图片是否可复制，SVG图片不支持复制
colorFilter 设置图片颜色滤镜效果
事件
onComplete(({width,height,componentWidth,componentHeight}) => {}) 图片成功加载时触发
onError({componentWidth,componentHeight} => {}) 图片加载出现异常时触发
onFinish(() => {}) 当加载的源文件为带动效的svg图片时,当svg动效播放完成时触发
@Entry
@Component
struct Image_test{build(){Column() {List() {ListItem(){Image($r('app.media.icon')).objectFit(ImageFit.Auto).alt($r('app.media.app_icon'))}.height(100).backgroundColor(Color.Green)ListItem() {Image($r('app.media.icon')).objectFit(ImageFit.None).alt($r('app.media.app_icon'))}.height(100).backgroundColor(Color.Pink)ListItem() {Image($r('app.media.icon')).objectFit(ImageFit.ScaleDown).alt($r('app.media.app_icon'))}.height(100).backgroundColor(Color.Green)ListItem() {Image($r('app.media.icon')).objectFit(ImageFit.Contain).alt($r('app.media.app_icon'))}.height(100).backgroundColor(Color.Pink)ListItem(){Image($r('app.media.icon')).objectFit(ImageFit.Cover).alt($r('app.media.app_icon'))}.height(100).backgroundColor(Color.Green)ListItem(){Image($r('app.media.icon')).objectFit(ImageFit.Fill).alt($r('app.media.app_icon'))}.height(100).backgroundColor(Color.Green)}}}
}
@Entry
@Component
struct Image_test{build(){Column() {Image($r('app.media.icon')).objectFit(ImageFit.Contain).alt($r('app.media.app_icon')).objectRepeat(ImageRepeat.Y).interpolation(ImageInterpolation.Medium).renderMode(ImageRenderMode.Template).fitOriginalSize(false)}}
}
)
