鸿蒙组件学习_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)
   }
 }
}
相关推荐
于顾而言2 小时前
【笔记】Comprehensive Rust语言学习
笔记·学习·rust
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
zyq99101_14 小时前
树与二叉树的奥秘全解析
c语言·数据结构·学习·1024程序员节
微露清风4 小时前
系统性学习C++-第七讲-string类
java·c++·学习
报错小能手4 小时前
项目——基于C/S架构的预约系统平台(3)
linux·开发语言·笔记·学习·架构·1024程序员节
W.Y.B.G5 小时前
css3 学习笔记
笔记·学习·css3·1024程序员节
执笔论英雄5 小时前
【大模型推理】ScheduleBatch 学习
java·spring boot·学习
AL流云。6 小时前
学习Docker前提:多环境安装Docker
学习·docker·eureka·1024程序员节
2301_803554526 小时前
Http学习
网络协议·学习·http
风已经起了6 小时前
FPGA学习笔记——用Vitis IDE生成工程(串口发送)
笔记·学习·fpga开发·fpga·1024程序员节