0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙HarmonyOS引用图片的方法

王程 来源:jf_75796907 作者:jf_75796907 2024-02-01 14:35 次阅读

前言

Image通过调用接口来创建,接口调用形式如下:

Image(src: string | Resource | media.PixelMap)

该接口通过图片数据源获取图片,支持本地图片和网络图片的渲染展示。其中,src是图片的数据源。

加载图片资源

Image支持加载存档图(重点)、多媒体像素图(了解即可)两种类型。

存档图类型数据源
存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64。

本地资源

创建文件夹,将本地图片放入ets文件夹下的任意位置。
Image组件引入本地图片路径,即可显示图片(根目录为ets文件夹)。

Image('images/view.jpg')
.width(200)

网络资源

引入网络图片需申请权限ohos.permission.INTERNET,具体申请方式请参考权限申请声明。此时,Image组件的src参数为网络图片的链接。

Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址

Resource资源

使用资源格式可以跨包/跨模块引入图片,resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

wKgaomW7O4KAAa-0AAPlTbvC--8299.png

调用方式:

Image($r('app.media.icon'))

还可以将图片放在rawfile文件夹下。

wKgaomW7O4iASOaJAATP0f9qAjI641.png

还可以将图片放在rawfile文件夹下。

调用方式:

Image($rawfile('snap'))

媒体库file://data/storage
支持file://路径前缀的字符串,用于访问通过媒体库提供的图片路径。
a. 调用接口获取图库的照片url。

import picker from '@ohos.file.picker';
@Entry
@Component
struct Index {
  @State imgDatas: string[] = [];
  // 获取照片url集
  getAllImg() {
    
    let result = new Array< string >();
    try {
      let PhotoSelectOptions = new picker.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
      PhotoSelectOptions.maxSelectNumber = 5;
      let photoPicker = new picker.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
        this.imgDatas = PhotoSelectResult.photoUris;
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
      }).catch((err) => {
        console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);
      });
    } catch (err) {
      console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }
  }

  // aboutToAppear中调用上述函数,获取图库的所有图片url,存在imgDatas中
  async aboutToAppear() {
    this.getAllImg();
  }
  // 使用imgDatas的url加载图片。
  build() {
    Column() {
      Grid() {
        ForEach(this.imgDatas, item => {
          GridItem() {
            Image(item)
              .width(200)
          }
        }, item => JSON.stringify(item))
      }
    }.width('100%').height('100%')
  }
}

b. 从媒体库获取的url格式通常如下。

Image('file://media/Photos/5')
.width(200)

base64
路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data],其中[base64 data]为Base64字符串数据。
Base64格式字符串可用于存储图片的像素数据,在网页上使用较为广泛

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 接口
    +关注

    关注

    33

    文章

    8588

    浏览量

    151103
  • 数据源
    +关注

    关注

    1

    文章

    63

    浏览量

    9676
  • 鸿蒙
    +关注

    关注

    57

    文章

    2348

    浏览量

    42831
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30166
收藏 人收藏

    评论

    相关推荐

    名单公布!【书籍评测活动NO.47】HarmonyOS NEXT启程:零基础构建纯血鸿蒙应用

    要在2000万 。这一呼吁引起了全球开发者的关注,也意味着市场对HarmonyOS开发人才的需求将快速增长。 什么是纯血鸿蒙 HarmonyOS NEXT,也被称为纯血鸿蒙,是全栈自研
    发表于 10-14 14:36

    华为“纯血”鸿蒙系统 HarmonyOS NEXT 将于9月底推出正式版

    据报道,正在举行的 2024 年中国国际服务贸易交易会(以下简称“服贸会”)一场论坛上,华为鸿蒙行业解决方案总经理陈欣欣透露,华为完全自主开发、原生安全、原生智能的华为“纯血”鸿蒙系统
    的头像 发表于 09-14 14:27 1027次阅读

    庆科信息获HarmonyOS高级应用开发能力认证!助力品牌快速打造鸿蒙原生应用

    近日,上海庆科信息技术有限公司荣获HarmonyOS应用开发者高级认证,公司在华为鸿蒙生态的开发能力得到进一步拓展,能够帮助客户快速开发基于HarmonyOS Next的鸿蒙原生应用,
    的头像 发表于 07-17 13:24 594次阅读
    庆科信息获<b class='flag-5'>HarmonyOS</b>高级应用开发能力认证!助力品牌快速打造<b class='flag-5'>鸿蒙</b>原生应用

    华为HarmonyOS NEXT鸿蒙星河版正式开启Beta计划

    在刚刚落幕的华为开发者大会(HDC 2024)盛会上,华为震撼宣布HarmonyOS NEXT鸿蒙星河版正式迈入Beta测试阶段,并预告其商用版本将于今年第四季度璀璨登场,预示着今年10月,搭载全新鸿蒙星河系统的华为手机即将与消
    的头像 发表于 07-15 15:59 884次阅读

    鸿蒙原生应用元服务开发-鸿蒙真机运行项目实战与注意事项

    、查看设备运行 五、点击项目结构 六、勾选红色框圈部分 登录开发者账号 七、选择好公司 八、等待运行完成 九、安装成功 可以在真机上体验项目了 本文参考引用HarmonyOS官方开发文档,基于API9。
    发表于 05-24 15:12

    MobTech袤博科技旗下核心SDK产品已全面适配HarmonyOS NEXT鸿蒙星河版

    HarmonyOS NEXT鸿蒙星河版。 不同于安卓系统和IOS系统,鸿蒙系统(HarmonyOS)是由华为公司推出的全场景、全平台的分布式操作系统,具有多设备协同、快速响应等特点。系
    的头像 发表于 05-14 17:41 477次阅读

    HarmonyOS开发案例:【图片编辑】

    基于canvas组件、图片编解码,介绍了图片编辑实现过程。
    的头像 发表于 04-22 16:42 913次阅读
    <b class='flag-5'>HarmonyOS</b>开发案例:【<b class='flag-5'>图片</b>编辑】

    鸿蒙新篇章,领航新征程 I 软通动力荣膺首批“HarmonyOS开发服务商”

    HarmonyOS开发服务商”,成为华为该领域首批认证服务商。 软通动力高级副总裁石蓉(右),华为终端云开发者服务与平台部总裁望岳(左) HarmonyOS开发服务商是基于华为HarmonyOS系统为行业客户开发
    的头像 发表于 03-14 17:19 530次阅读
    <b class='flag-5'>鸿蒙</b>新篇章,领航新征程 I 软通动力荣膺首批“<b class='flag-5'>HarmonyOS</b>开发服务商”

    2024款鸿蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

    鸿蒙的出现,标志着中国科技的崛起。HarmonyOS就是我们说的华为鸿蒙系统,截止到2023年8月4日已有超过7亿台设备搭载了鸿蒙OS系统。据多家媒体报道,2024年国内有21所985
    发表于 02-28 10:29

    鸿蒙千帆起】高德地图携手HarmonyOS NEXT,开启智能出行新篇章

    2024 年 1 月 18 日下午,华为举办了鸿蒙生态千帆启航仪式,对外宣布 HarmonyOS NEXT 星河预览版现已开放申请,同时,首批 200+鸿蒙原生应用加速开发,鸿蒙生态设
    发表于 02-02 11:09

    鸿蒙开发教学-图片引用

    该接口通过图片数据源获取图片,支持本地图片和网络图片的渲染展示。其中,src是图片的数据源。
    的头像 发表于 02-01 17:36 696次阅读
    <b class='flag-5'>鸿蒙</b>开发教学-<b class='flag-5'>图片</b>的<b class='flag-5'>引用</b>

    华为宣布HarmonyOS NEXT鸿蒙星河版开发者预览面向开发者开放申请

    华为宣布HarmonyOS NEXT鸿蒙星河版开发者预览面向开发者开放申请,这意味着鸿蒙生态进入第二阶段,将加速千行百业的应用鸿蒙化。
    的头像 发表于 01-29 16:42 1412次阅读
    华为宣布<b class='flag-5'>HarmonyOS</b> NEXT<b class='flag-5'>鸿蒙</b>星河版开发者预览面向开发者开放申请

    淘宝与华为合作将基于HarmonyOS NEXT启动鸿蒙原生应用开发

    1月25日,淘宝与华为举办鸿蒙合作签约仪式,宣布将基于HarmonyOS NEXT启动鸿蒙原生应用开发。
    的头像 发表于 01-26 16:14 1122次阅读

    HarmonyOS SDK,助力开发者打造焕然一新的鸿蒙原生应用

    鸿蒙生态千帆启航仪式于 1 月 18 日正式启动。从 2019 年 HarmonyOS 正式发布到 2020 年“没有人能够熄灭漫天星光”,今天,满天星光终汇成璀璨星河,HarmonyOS NEXT
    发表于 01-19 10:31

    免费学习鸿蒙HarmonyOS)开发,一些地址分享

    HarmonyOS万物互联,从华为一系列的操作来看已经与iOS、Android形成三足鼎立之势了。 根据《澎湃新闻》的报道,已有23所985高校和46所211高校加入了鸿蒙班的行列,合计达到了69所
    发表于 01-12 20:48