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

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

一、操作环境

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

二、Image组件

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

接口

Image(src: string | PixelMap | Resource)

参数

参数名

参数类型

必填

默认值

参数描述

src

string| PixelMap| Resource

-

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

当使用相对路径引用图片资源时,例如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-ignoreImage(this.pixelMap) // pixelMap为内存图片.width(180).height(80)}.width('100%')}.height('100%')}
}

好了就写到这吧!

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

我家地址:亚丁号

最后送大家一首诗:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/481086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode】3月19日打卡-Day4

题1 最长回文串 描述 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串。 在构造过程中,请注意区分大小写。比如 “Aa” 不能当做一个回文字符串。 注意: 假设字符串的长度不会超过 1010。 示例 1: 输入: “abccccdd” 输…

别求面经了!小夕手把手教你如何斩下和选择NLP算法岗offer!(19.11.21更新)

推完上一篇文章,订阅号和知乎后台有好多小伙伴跟小夕要面经(还有个要买简历的是什么鬼),然鹅小夕真的没有整理面经呀,真的木有时间(。 ́︿ ̀。)。不过话说回来,面经有多大用呢&#…

git - 简易指南

http://www.bootcss.com/p/git-guide/

梁家卿 | 百科知识图谱同步更新

本文转载自公众号知识工场。 本文整理自复旦大学知识工场梁家卿博士在IJCAI 2017 会议上的论文报告,题目为《How to Keep a Knowledge Base Synchronized with Its Encyclopedia Source》,作者包括:梁家卿博士(复旦大学&#xff0…

【LeetCode】3月20日打卡-Day5

题1 最小的k个数 描述 输入整数数组 arr ,找出其中最小的 k 个数。例如,输入4、5、1、6、2、7、3、8这8个数字,则最小的4个数字是1、2、3、4。 示例 1: 输入:arr [3,2,1], k 2 输出:[1,2] 或者 [2,1] 示…

别再搜集面经啦!小夕教你斩下NLP算法岗offer!

推完上一篇文章,订阅号和知乎后台有好多小伙伴跟小夕要面经(还有个要买简历的是什么鬼),然鹅小夕真的没有整理面经呀,真的木有时间(。 ́︿ ̀。)。不过话说回来,面经有多大用呢&#…

程序员面试100题之十六:二叉树中两个节点的最近公共父节点(最低的二叉树共同祖先)

这个问题可以分为三种情况来考虑:情况一:root未知,但是每个节点都有parent指针 此时可以分别从两个节点开始,沿着parent指针走向根节点,得到两个链表,然后求两个链表的第一个公共节点,这个方法很…

肖仰华 | 基于知识图谱的问答系统

本文转载自公众号知识工场。 本文整理自复旦大学知识工场肖仰华教授在VLDB 2017 会议上的论文报告,题目为《KBQA: Learning Question Answering over QA Corpora and Knowledge Bases》,作者包括:崔万云博士(现上海财经大学讲师&a…

【LeetCode】3月21日打卡-Day6

题1 水壶问题 描述 有两个容量分别为 x升 和 y升 的水壶以及无限多的水。请判断能否通过使用这两个水壶,从而可以得到恰好 z升 的水? 如果可以,最后请用以上水壶中的一或两个来盛放取得的 z升 水。 你允许: 装满任意一个水壶 清空…

【小夕精选】YJango 7分钟带你领略你未曾想过的线性代数+微积分

小夕很早之前就想转一些精彩的技术文章,这样哪怕没有时间写作的时候,也能把优质的干货分享给大家~然鹅,由于我也不知道是什么的原因,就不小心拖到了现在╮( ̄▽ ̄"")╭之前有不少粉丝希…

【LeetCode】3月22日打卡-Day7

题1 描述 给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1。 返回使 A 中的每个值都是唯一的最少操作次数。 示例 1: 输入:[1,2,2] 输出:1 解释:经过一次 move 操作,数组将变为 [1, 2, 3]。…

手写实现李航《统计学习方法》书中全部算法

https://github.com/Dod-o/Statistical-Learning-Method_Code

白硕 | 基于区块链的众包社区激励机制

本文整理自白硕老师在 YOCSEF 武汉专题论坛:“人工智能遇到区块链,是惊鸿一瞥还是天长地久?”的报告。 很高兴有这个机会跟大家交流。我先讲几个案例作为引子。第一个案例与知识图谱有关。这个公司做的是非常垂直的一个领域,安全教…

【小夕精选】多轮对话之对话管理(Dialog Management)

这一篇是一段时间之前小夕初入对话领域时刷到的徐阿衡小姐姐写的一篇文章,写的深入浅出,十分适合有一定基础的情况下想快速了解对话管理技术的童鞋阅读~另外顺手推一下阿衡小姐姐的订阅号「徐阿衡」,干货满满不要错过哦~这一篇想写一写对话管…

【LeetCode】3月23日打卡-Day8

题1 链表的中间结点 描述 给定一个带有头结点 head 的非空单链表,返回链表的中间结点。 如果有两个中间结点,则返回第二个中间结点。 示例 1: 输入:[1,2,3,4,5] 输出:此列表中的结点 3 (序列化形式:[3,4,5…

KD Tree的原理及Python实现

1. 原理篇我们用大白话讲讲KD-Tree是怎么一回事。1.1 线性查找假设数组A为[0, 6, 3, 8, 7, 4, 11],有一个元素x,我们要找到数组A中距离x最近的元素,应该如何实现呢?比较直接的想法是用数组A中的每一个元素与x作差,差的…

漆桂林 | 知识图谱的应用

本文作者为东南大学漆桂林老师,首发于知乎专栏知识图谱和智能问答 前面一篇文章“知识图谱之语义网络篇”已经提到了知识图谱的发展历史,回顾一下有以下几点: 1. 知识图谱是一种语义网络,即一个具有图结构的知识库,这里…

NLP预训练之路——从word2vec, ELMo到BERT

前言 还记得不久之前的机器阅读理解领域,微软和阿里在SQuAD上分别以R-Net和SLQA超过人类,百度在MS MARCO上凭借V-Net霸榜并在BLEU上超过人类。这些网络可以说一个比一个复杂,似乎“如何设计出一个更work的task-specific的网络"变成了NLP…

论文 | 信息检索结果Ranking的评价指标《RankDCG: Rank-Ordering Evaluation Measure》

未经允许,不得转载,谢谢~~ 一 文章简介 为什么要提出这个新的评价算法? 我们都知道ranking过程对于信息检索的结果是非常重要的,那么我们就需要有一些算法能评价ranking的结果到底如何。现有用来评价ranking的常用算法有&#xff…

【LeetCode】3月24日打卡-Day9

题1 按摩师 描述 一个有名的按摩师会收到源源不断的预约请求,每个预约都可以选择接或不接。在每次预约服务之间要有休息时间,因此她不能接受相邻的预约。给定一个预约请求序列,替按摩师找到最优的预约集合(总预约时间最长&#x…