IT评测·应用市场-qidao123.com技术社区

标题: 鸿蒙(HarmonyOS NEXT)使用Image或HarmonyOSSymbol加载图片资源 [打印本页]

---

作者: 南飓风    时间: 2024-9-2 00:28
标题: 鸿蒙(HarmonyOS NEXT)使用Image或HarmonyOSSymbol加载图片资源
项目开发中都会使用图片，有当地，网络图片以及对应的格式。
现在Image支持加载string、PixelMap和Resource类型的数据源，png、jpg、bmp、svg和gif类型的图片格式
一.使用本舆图片

1.一样寻常我们都会放在assets文件夹中。在ets目次里新建一个assets而且拖动图片到该目次里。

1. Image('/assets/a.png')
2.           .width(48)
3.           .height(48)

复制代码

2.也可以放在resource目次下的图片-media

注意：这种方式不必要图片后缀

2. Image($r('app.media.background'))
3.           .width(48)
4.           .height(48)

复制代码

3.resource目次下的-rawfile

1. Image($rawfile('background.png'))
2.           .width(48)
3.           .height(48)

复制代码

二.使用网络图片

使用网络图片的时间必要开启网络权限
module.json5文件里

1. "requestPermissions": [{
2.   "name":"ohos.permission.INTERNET"
3. }],

复制代码

 Image组件中使用

1.         Image("https://profileavatar.csdnimg.cn/a5a14c71d4e247b2b0de5f09d0d4deaf_liang04273.jpg!1")
2.           .width(48)
3.           .height(48)

复制代码

三.使用体系图标(HarmonyOS Symbol)

  文档中心官网对应地点:  文档中心 
体系图标库:HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟
官方使用介绍： zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md · OpenHarmony/docs - Gitee.com 

1. Column() {
2.           Text("Light")
3.           Text() {
4.             SymbolSpan($r('sys.symbol.ohos_trash'))
5.               .fontWeight(FontWeight.Lighter)
6.               .fontSize(96)
7.           }
8.         }

复制代码

 也可以使用image组件

2.       Image($r('sys.media.ohos_ic_public_sound'))
3.           .width(48)
4.           .height(48)
5.           .fillColor(Color.Blue)

复制代码

四.使用SVG等字体图标

阿里巴巴矢量图标库 iconfont
下载的格式为SVG，可使用fillColor()更改图标颜色，更改不了的则必要在svg代码里添加fill属性
fill='#ccc'

吧下载好的svg图片放到resources目次下的media。使用频率最高

1.    Image($r('app.media.ic_Wechat'))
2.           .width(48)
3.           .height(48)
4.           .fillColor(Color.Red)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4