首页 > 其他分享 > 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件

 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件

时间:2023-12-24 14:07:23浏览次数:37  
标签:src 图片 Image height HarmonyOS svg ArkUI 加载


 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件

 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件_动效

 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件_加载_02编辑

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Image组件

Image 用来加载并显示图片的基础组件,它支持从内存、本地和网络加载图片,当从网络加载图片的时候,需要申请网络访问权限。ohos.permission.INTERNET

接口

Image(src: string | PixelMap | Resource)

参数

参数名

参数类型

必填

默认值

参数描述

src

string| PixelMapResource

-

图片的数据源,支持本地图片和网络图片。

当使用相对路径引用图片资源时,例如Image("common/test.jpg"),不支持该Image组件被跨包/跨模块调用,建议使用$r方式来管理需全局使用的图片资源。

- 支持的图片格式包括png、jpg、bmp、svg和gif。

- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。

- 支持dataability://路径前缀的字符串,用于访问通过data ability提供的图片路径。

属性

名称

参数类型

默认值

描述

alt

string | Resource

-

加载时显示的占位图。仅支持本地图片。

objectFit

ImageFit

Cover

设置图片的缩放类型。

objectRepeat

ImageRepeat

NoRepeat

设置图片的重复样式。

说明:

- svg类型图源不支持该属性。

interpolation

ImageInterpolation

None

设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。

说明:

- svg类型图源不支持该属性。

- PixelMap资源不支持该属性。

renderMode

ImageRenderMode

Original

设置图片渲染的模式。

说明:

- svg类型图源不支持该属性。

sourceSize

{

width: number,

height: number

}

-

设置图片解码尺寸,将原始图片解码成指定尺寸的图片,number类型单位为px。

说明:

- PixelMap资源和SVG图片不支持该属性。

matchTextDirection

boolean

false

设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。

fitOriginalSize

boolean

true

图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。

fillColor

ResourceColor

-

仅对svg图源生效,设置后会替换svg图片的fill颜色。

autoResize

boolean

true

是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。

syncLoad8+

boolean

false

设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。

事件

  • onComplete:图片成功加载时触发该回调,返回图片原始尺寸信息。
  • onError:图片加载出现异常时触发该回调。
  • onFinish:当加载的源文件为带动效的 svg 图片时,当 svg 动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。

三、示例

代码

// @ts-nocheck
@Entry
@Component
struct Index {
  // @ts-ignore
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Image($r("app.media.icon")) //本机加载(就是本地的App图标)
          .width(180)
          .height(180)
          .renderMode(ImageRenderMode.Original) //  原图渲染
          .onClick(() => { //  通用事件
            if (this.src == this.on || this.src == this.off2on) {
              this.src = this.on2off
            } else {
              this.src = this.off2on
            }
          })
          .onComplete((msg: { width: number,height: number }) => {
            console.log(msg.width)
            console.log(msg.height)
          })
          .onFinish(() => {
          if (this.src == this.off2on) {
            this.src = this.on
          } else {
            this.src = this.off
          }
        })
        Image('https://img.sample.com/imgs/test.png') //加载网络图片
          .width(180)
          .height(80)
          .onError(() => {
            console.error('load image fail') //image加载会失败 没申请权限
          })
        // @ts-ignore
        Image(this.pixelMap) // pixelMap为内存图片
          .width(180)
          .height(80)
      }
      .width('100%')
    }
    .height('100%')
  }
}

 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件_加载_03

好了就写到这吧!

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马?
惟有点赞加关注大军。


标签:src,图片,Image,height,HarmonyOS,svg,ArkUI,加载
From: https://blog.51cto.com/u_16269709/8955089

相关文章

  • 【江鸟中原】ArkUI组件示例
    学习了一段鸿蒙课,觉得有必要晒一晒自己的进步。通过对ArkUI的学习,我学会了它主要分为基础组件、容器和弹窗。下面我主要对基础组件的按钮和文本进行分析,希望对学习鸿蒙开发的同学有帮助。1.在DevEcoStudio中创建一个新项目2.在main下面的pages文件夹下建立ButtonPage.ets项目项目......
  • HarmonyOS 初体验 (七)了解包结构
    上一篇HarmonyOS初体验(五)了解UI、应用模型应用结构结构图Module描述:一个应用包含一个或者多个Module,可以在DevEcoStudio工程中创建一个或者多个Module。Module是HarmonyOS应用/服务的基本功能单元,包含了源代码、资源文件、第三方库及应用/服务配置文件,每一个Module都......
  • HarmonyOS 初体验 (五)了解UI、应用模型
    上一篇HarmonyOS初体验(四)项目运行UI设计:ArkUI框架地址HarmonyOS提供了一套UI开发框架,即方舟开发框架(ArkUI框架)https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-overview-0000001478061421-V2基本概念UI:即用户界面。开发者可以将应用的用......
  • 【C#/WPF】Bitmap、BitmapImage、ImageSource 、byte[]转换问题
    C#/WPF项目中,用到图像相关的功能时,涉及到多种图像数据类型的相互转换问题,这里做了个整理。包含的内容如下:Bitmap和BitmapImage相互转换。RenderTargetBitmap–>BitmapImageImageSource–>BitmapBitmapImage和byte[]相互转换。byte[]–>BitmapStackOverflow上有很......
  • Wpf Bitmap(Image)Base64,Url,文件Path,Stream转BitmapSource(ImageSource),无需外部d
    直接上代码usingSystem;usingSystem.Drawing;usingSystem.IO;usingSystem.Windows.Forms;usingSystem.Windows.Media.Imaging;namespaceCommonUtils{///<summary>///Windows图片处理///</summary>publicstaticclassWindowsImage......
  • HarmonyOS应用事件打点开发指导
     简介传统的日志系统里汇聚了整个设备上所有程序运行的过程流水日志,难以识别其中的关键信息。因此,应用开发者需要一种数据打点机制,用来评估如访问数、日活、用户操作习惯以及影响用户使用的关键因素等关键信息。HiAppEvent是在系统层面为应用开发者提供的一种事件打点机制,用......
  • 优化减小docker images 尺寸
    什么是docker?Docker是一种容器引擎,可以在容器内运行一段代码。Docker镜像是在任何地方运行您的应用程序而无需担心应用程序依赖性的方式。要构建镜像,docker使用一个名为Dockerfile的文件。Dockerfile是一个包含许多指令(RUN、COPY、EXPOSE等)的文件。成功执行这些命令后,doc......
  • 《CLIP:Connecting text and images》论文学习
    一、Abstract尽管深度学习已经彻底改革了计算机视觉领域,但当前的深度学习视觉方案方法存在几个主要问题:高质量的视觉数据集,制作过程耗时且成本高昂,同时只包含了有限范围的视觉概念标准的深度学习视觉模型(例如ImageNet、ResNet)擅长完成单一任务,且只能完成一个任务,需要投入巨大......
  • Local Relation Networks for Image Recognition: LRNet
    LocalRelationNetworksforImageRecognition*Authors:[[HanHu]],[[ZhengZhang]],[[ZhendaXie]],[[StephenLin]]DOI:10.1109/ICCV.2019.00356@inproceedings{Hu2019,doi={10.1109/iccv.2019.00356},url={https://doi.org/10.1109/iccv.2019.00356......
  • Deep Residual Learning for Image Recognition:ResNet
    DeepResidualLearningforImageRecognition*Authors:[[KaimingHe]],[[XiangyuZhang]],[[ShaoqingRen]],[[JianSun]]DOI:10.1109/CVPR.2016.90初读印象comment::(ResNet)提出残差链接以解决网络训练效率随着深度增加而下降的情况。Why网络深度对图像识别......