鸿蒙组件学习_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)
   }
 }
}
相关推荐
小王努力学编程1 小时前
【Linux网络编程】应用层协议HTTP(实现一个简单的http服务)
linux·服务器·网络·c++·网络协议·学习·http
viperrrrrrrrrr71 小时前
大数据学习(112)-HIVE中的窗口函数
hive·sql·学习
*TQK*1 小时前
CSS学习笔记8——表格
css·笔记·学习·html
豆沙沙包?5 小时前
8.学习笔记-Maven进阶(P82-P89)
笔记·学习·maven
醉暮天6 小时前
4.25学习——文件上传之00截断
学习
blackA_10 小时前
数据库MySQL学习——day4(更多查询操作与更新数据)
数据库·学习·mysql
梁下轻语的秋缘11 小时前
每日c/c++题 备战蓝桥杯(P1049 [NOIP 2001 普及组] 装箱问题)
c语言·c++·学习·蓝桥杯
球求了12 小时前
C++:继承机制详解
开发语言·c++·学习
时光追逐者13 小时前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb