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

今天带大家了解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
@Component
struct 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
@Component
struct 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%')
 }
}


以上就是Image最简单的使用

总结

本文主要讲解了Image组件的简单使用，包括引用本地图片和网络图片。