鸿蒙(HarmonyOS NEXT)使用Image或HarmonyOSSymbol加载图片资源
项目开发中都会使用图片,有当地,网络图片以及对应的格式。现在Image支持加载string、PixelMap和Resource类型的数据源,png、jpg、bmp、svg和gif类型的图片格式
一.使用本舆图片
1.一样寻常我们都会放在assets文件夹中。在ets目次里新建一个assets而且拖动图片到该目次里。
https://i-blog.csdnimg.cn/direct/86dc2adeec534be2894e1e5b3a9401a7.png
Image('/assets/a.png')
.width(48)
.height(48) 2.也可以放在resource目次下的图片-media
https://i-blog.csdnimg.cn/direct/c4ec07671f0f44abbed228a666c688fd.png
注意:这种方式不必要图片后缀
Image($r('app.media.background'))
.width(48)
.height(48) 3.resource目次下的-rawfile
https://i-blog.csdnimg.cn/direct/bef7979760c24803b1838bcfa6d81200.png
Image($rawfile('background.png'))
.width(48)
.height(48) 二.使用网络图片
使用网络图片的时间必要开启网络权限
module.json5文件里
"requestPermissions": [{
"name":"ohos.permission.INTERNET"
}], Image组件中使用
Image("https://profileavatar.csdnimg.cn/a5a14c71d4e247b2b0de5f09d0d4deaf_liang04273.jpg!1")
.width(48)
.height(48) 三.使用体系图标(HarmonyOS Symbol)
文档中心官网对应地点: 文档中心
体系图标库:HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟
官方使用介绍: zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md · OpenHarmony/docs - Gitee.com
Column() {
Text("Light")
Text() {
SymbolSpan($r('sys.symbol.ohos_trash'))
.fontWeight(FontWeight.Lighter)
.fontSize(96)
}
} https://i-blog.csdnimg.cn/direct/71ca089764124844907b811ed2e2ed29.png
也可以使用image组件https://i-blog.csdnimg.cn/direct/40aad5114dd1419da452899ea9c0d63e.png
Image($r('sys.media.ohos_ic_public_sound'))
.width(48)
.height(48)
.fillColor(Color.Blue) 四.使用SVG等字体图标
阿里巴巴矢量图标库 iconfont
下载的格式为SVG,可使用fillColor()更改图标颜色,更改不了的则必要在svg代码里添加fill属性
fill='#ccc'
https://i-blog.csdnimg.cn/direct/f43db2e9af5946fabcd4f1315914d76d.png
吧下载好的svg图片放到resources目次下的media。使用频率最高
https://i-blog.csdnimg.cn/direct/0cdc122df795461784c185dcbbdbf5c3.png
Image($r('app.media.ic_Wechat'))
.width(48)
.height(48)
.fillColor(Color.Red)
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]