鸿蒙组件学习_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探索学习】第二篇Linux的基本指令(2)——开启Linux学习第二篇
linux·运维·学习
007php0073 小时前
某大厂跳动面试:计算机网络相关问题解析与总结
java·开发语言·学习·计算机网络·mysql·面试·职场和发展
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
递归不收敛4 小时前
吴恩达机器学习课程(PyTorch 适配)学习笔记:3.3 推荐系统全面解析
pytorch·学习·机器学习
又是忙碌的一天6 小时前
前端学习 JavaScript(2)
前端·javascript·学习
蒙奇D索大6 小时前
【数据结构】考研数据结构核心考点:二叉排序树(BST)全方位详解与代码实现
数据结构·笔记·学习·考研·算法·改行学it
玲娜贝儿--努力学习买大鸡腿版6 小时前
推荐算法学习笔记(十九)阿里SIM 模型
笔记·学习·推荐算法
光影少年6 小时前
Flutter生态及学习路线
学习·flutter
尤利乌斯.X7 小时前
复杂网络仿真从入门到精通:0 学习路线
网络·学习·matlab·仿真·复杂网络
梦幻精灵_cq7 小时前
70行代码展现我的“毕生”编程能力
学习