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

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

作者：坚果

公众号："大前端之旅"

OpenHarmony布道师，InfoQ签约作者，CSDN博客专家，华为云享专家，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,Harmony，小程序,安卓，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组件的简单使用，包括引用本地图片和网络图片。

审核编辑：汤梓红

鸿蒙实验室