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

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

3天内不再提示

鸿蒙开发教学-图片的引用

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-02-01 17:36 次阅读

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

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

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

加载图片资源

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

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

  • 本地资源

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

Image('images/view.jpg')
.width(200)
.width(200)
.width(200)
  • 网络资源

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

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

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

调用方式:

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

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

image.png

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

调用方式:

Image($rawfile('snap'))
Image($rawfile('snap'))
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)
.width(200)
.width(200)
  • base64 路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data],其中[base64 data]为Base64字符串数据。 Base64格式字符串可用于存储图片的像素数据,在网页上使用较为广泛。

审核编辑 黄宇

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

    关注

    33

    文章

    8580

    浏览量

    151046
  • 数据源
    +关注

    关注

    1

    文章

    63

    浏览量

    9676
  • 鸿蒙
    +关注

    关注

    57

    文章

    2345

    浏览量

    42822
收藏 人收藏

    评论

    相关推荐

    鸿蒙原生开发手记:01-元服务开发

    简介 元服务是鸿蒙中的一种轻量应用形态,无需下载,直接运行。类似于微信小程序,但与小程序不同的是,元服务更加轻量。 元服务使用原生开发,是系统级提供的,无论从易用性、性能、体验上,都要比小程序好
    发表于 11-14 17:28

    鸿蒙ArkTS声明式组件:ImageSpan

    图片的数据源,支持本地图片和网络图片。 当使用相对路径引用图片资源时
    的头像 发表于 06-24 15:37 370次阅读
    <b class='flag-5'>鸿蒙</b>ArkTS声明式组件:ImageSpan

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

    一、解压项目注意项目包不能为中文 二、用数据线将装好DevEco Studio的电脑与设置为开发者模式的鸿蒙手机相连接。 三、将项目包托进DevEco Studio 中 注意项目包文件不能有嵌套 四
    发表于 05-24 15:12

    鸿蒙APP开发实战:【Api9】拍照、拍视频;选择图片、视频、文件工具类

    鸿蒙开发过程中,经常会进行系统调用,拍照、拍视频、选择图库图片、选择图库视频、选择文件。今天就给大家分享一个工具类。
    的头像 发表于 03-26 16:27 777次阅读
    <b class='flag-5'>鸿蒙</b>APP<b class='flag-5'>开发</b>实战:【Api9】拍照、拍视频;选择<b class='flag-5'>图片</b>、视频、文件工具类

    鸿蒙实战项目开发:【短信服务】

    文档》 针对鸿蒙成长路线打造的鸿蒙学习文档 。话不多说,我们直接看详细资料 鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )
    发表于 03-03 21:29

    未来从事鸿蒙开发?是否会有前景?

    鸿蒙的未来发展肯定很有前景的,鸿蒙作为新出的国产操作系统。它不仅只是手机操作系统,鸿蒙的出发点就是万物互联。包含原生应用开发、车载、智能设备、数码、智能家居家电等等。如此大的市场分布,
    发表于 02-19 21:31

    使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

    随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro 发布了 v4.0.0-beta.x 版本,支持使用 Taro 快速开发鸿蒙原生应用,也可将现有的
    的头像 发表于 02-02 16:09 868次阅读
    使用 Taro <b class='flag-5'>开发</b><b class='flag-5'>鸿蒙</b>原生应用 —— 快速上手,<b class='flag-5'>鸿蒙</b>应用<b class='flag-5'>开发</b>指南

    鸿蒙HarmonyOS引用图片的方法

    前言 Image通过调用接口来创建,接口调用形式如下:   Image(src: string | Resource | media.PixelMap)   该接口通过图片数据源获取图片,支持本地图片
    的头像 发表于 02-01 14:35 1038次阅读
    <b class='flag-5'>鸿蒙</b>HarmonyOS<b class='flag-5'>引用</b><b class='flag-5'>图片</b>的方法

    鸿蒙开发教程

    去年8 月份华为发布会上,华为发布了HarmonyOS NEXT预览版,宣布不再兼容安卓应用。大家期待的纯血鸿蒙终于要来临了,next 预览版本现在已经开放申请渠道了,Next 开发者预览版本目前只
    的头像 发表于 01-31 17:11 766次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>教程

    鸿蒙开发用什么语言?

    两种开发方向 我们常说鸿蒙开发,但是其实鸿蒙开发分为两个方向: 一个是系统级别的开发,比如驱动,
    的头像 发表于 01-30 16:12 1533次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>用什么语言?

    鸿蒙开发【设备开发基础知识】

    鸿蒙开发基础知识讲解
    的头像 发表于 01-29 18:44 1014次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>【设备<b class='flag-5'>开发</b>基础知识】

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1881次阅读
    <b class='flag-5'>鸿蒙</b>ArkUI<b class='flag-5'>开发</b>-Tabs组件的使用

    鸿蒙开发OpenHarmony组件复用案例

    ; ...... } 开发实践 我们看下组件复用的实际使用案例。示例中,会创建一个图片列表页面,使用懒加载LazyForEach,以及组件复用能力。 创建数据源 首先,创建了一个业务对象类MyImage
    发表于 01-15 17:37

    鸿蒙物联网基础

    关于物联网架构以及鸿蒙第三方应用库的引用方式
    的头像 发表于 01-08 08:37 532次阅读
    <b class='flag-5'>鸿蒙</b>物联网基础

    鸿蒙开发南向环境搭建教学

    南向开发环境搭建教学,更多鸿蒙开发资料可以前往高清完整版 《鸿蒙开发4.0基础-高阶文档》找保存
    发表于 01-05 16:38