鸿蒙组件学习_Image组件

说明

该组件从API Version 7 开始支持

使用网络图片时,需要申请ohos.permission.INTERNET

参数

必填

src     图片的数据源,支持本地图片和网络图片
不支持跨包跨模块调用该Image组件,建议使用$r方式来管理需全局使用的图片资源。

属性

alt     加载时显示的占位图，支持本地图片
objectFit   设置图片的缩放类型。默认值: ImageFit.Cover
    ImageFit.Cover  放大图片以适应容器,可能会裁剪
    ImageFit.Contain缩放图片以适应容器,可能存在空白
    ImageFit.Fill   图片拉伸以填充容器,可能会出现失真
    ScaleDown   图片按比例缩小以适应边界,但是不会放大图片
    Auto    自适应显示
    None    不进行任何缩放操作,即使图片溢出容器也不会被裁剪或缩放
objectRepeat    设置图片的重复样式。默认值: ImageRepeat.NoRepeat
    ImageRepeat.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)
   }
 }
}