OpenHarmony 应用开发之 ETS 开发方式中的 Image 组件

作者：坚果

2022 年 7 月 03 日
本文字数：1402 字
阅读完需：约 5 分钟

今天带大家了解 ETS 开发方式中的 Image 组件

作者：坚果
公众号："大前端之旅"
OpenHarmony 布道师，InfoQ 签约作者，CSDN 博客专家，华为云享专家，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,鸿蒙，小程序,安卓，VUE，JavaScript。

Image

图片组件，支持本地图片和网络图片的渲染展示。

我们可以看一下他的接口都有哪些内容

(src: string | PixelMap | Resource): ImageAttribute;

复制代码

src:string|PixelMap 图片的 URI，支持本地图片和网络路径，支持使用媒体 PixelMap 对象。

PixelMap:图像像素类，用于读取或写入图像数据以及获取图像信息。在调用 PixelMap 的方法前，需要先通过 createPixelMap 创建一个 PixelMap 实例。这里我只说前面的一个参数。

引用 App 本地图片

这里先演示如何通过接口引用 App 本地图片。图片格式支持“png/jpg/gif/svg”，图片文件可以存放在 media 媒体目录、或自己创建的“/common/images”目录

我在项目里放了两张鸿蒙相关的图片，都是不同的，便于区分，接下来，我们就在项目里使用他们。

@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Row() {      Column() {        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源          .width("100%")          .aspectRatio(1.5)        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片          .width("100%")          .aspectRatio(1.5)      }      .width('100%')    }    .height('100%')  }}

复制代码

我们点击右侧的预览，来看一下

以上就是本地图片的简单使用，接下来我们对网络图片进行同样的操作，

引用网络图片时记得添加权限

引用网络图片时记得添加权限。**方法：**需要在 config.json（FA 模型）或者 module.json5（Stage 模型）对应的"abilities"中添加网络使用权限 ohos.permission.INTERNET。

"abilities": [  {    ...    "permissions": ["ohos.permission.INTERNET"],    ...  }]

复制代码

@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Row() {      Column() {        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源          .width("100%")          .aspectRatio(2.6)        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片          .width("100%")          .aspectRatio(2.6)        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片          .width("100%")          .aspectRatio(2.6)      }      .width('100%')    }    .height('100%')  }}