项目开发中都会使用图片,有本地,网络图片以及对应的格式。

目前Image支持加载string、PixelMapResource类型的数据源,png、jpg、bmp、svg和gif类型的图片格式

一.使用本地图片

1.一般我们都会放在assets文件夹中。在ets目录里新建一个assets并且拖动图片到该目录里。

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

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

注意:这种方式不需要图片后缀


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

3.resource目录下的-rawfile

 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)
          }
        }

 也可以使用image组件

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

四.使用SVG等字体图标

阿里巴巴矢量图标库 iconfont

下载的格式为SVG,可使用fillColor()更改图标颜色,更改不了的则需要在svg代码里添加fill属性

fill='#ccc'

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

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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐