今天帶大家了解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組件的簡單使用，包括引用本地圖片和網絡圖片。

審核編輯：湯梓紅

鴻蒙實驗室