今天帶大家了解ETS開發(fā)方式中的Image組件

作者：堅果

公眾號："大前端之旅"

OpenHarmony布道師，InfoQ簽約作者，CSDN博客專家，華為云享專家，阿里云專家博主，51CTO博客首席體驗官，開源項目GVA成員之一，專注于大前端技術(shù)的分享，包括Flutter,Harmony，小程序,安卓，VUE，JavaScript。

Image

圖片組件，支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。

我們可以看一下他的接口都有哪些內(nèi)容

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

src:string|PixelMap 圖片的URI，支持本地圖片和網(wǎng)絡(luò)路徑，支持使用媒體PixelMap對象。

PixelMap:圖像像素類，用于讀取或?qū)懭雸D像數(shù)據(jù)以及獲取圖像信息。在調(diào)用PixelMap的方法前，需要先通過createPixelMap創(chuàng)建一個PixelMap實例。這里我只說前面的一個參數(shù)。

引用App本地圖片

這里先演示如何通過接口引用App本地圖片。圖片格式支持“png/jpg/gif/svg”，圖片文件可以存放在media媒體目錄、或自己創(chuàng)建的“/common/images”目錄

我在項目里放了兩張鴻蒙相關(guān)的圖片，都是不同的，便于區(qū)分，接下來，我們就在項目里使用他們。

@

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%'

)

}

}

我們點擊右側(cè)的預覽，來看一下

以上就是本地圖片的簡單使用，接下來我們對網(wǎng)絡(luò)圖片進行同樣的操作，

引用網(wǎng)絡(luò)圖片時記得添加權(quán)限

引用網(wǎng)絡(luò)圖片時記得添加權(quán)限。 方法：需要在config.json（FA模型）或者module.json5（Stage模型）對應(yīng)的"abilities"中添加網(wǎng)絡(luò)使用權(quán)限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

(

"網(wǎng)絡(luò)圖片，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最簡單的使用

總結(jié)

本文主要講解了Image組件的簡單使用，包括引用本地圖片和網(wǎng)絡(luò)圖片。

審核編輯：湯梓紅

鴻蒙實驗室