今天帶大家了解ETS開(kāi)發(fā)方式中的Image組件
作者:堅(jiān)果
公眾號(hào):"大前端之旅"
OpenHarmony布道師,InfoQ簽約作者,CSDN博客專家,華為云享專家,阿里云專家博主,51CTO博客首席體驗(yàn)官,開(kāi)源項(xiàng)目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對(duì)象。
PixelMap:圖像像素類,用于讀取或?qū)懭雸D像數(shù)據(jù)以及獲取圖像信息。在調(diào)用PixelMap的方法前,需要先通過(guò)createPixelMap創(chuàng)建一個(gè)PixelMap實(shí)例。這里我只說(shuō)前面的一個(gè)參數(shù)。
引用App本地圖片
這里先演示如何通過(guò)接口引用App本地圖片。圖片格式支持“png/jpg/gif/svg”,圖片文件可以存放在media媒體目錄、或自己創(chuàng)建的“/common/images”目錄
我在項(xiàng)目里放了兩張鴻蒙相關(guān)的圖片,都是不同的,便于區(qū)分,接下來(lái),我們就在項(xiàng)目里使用他們。
@
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%'
)
}
}
我們點(diǎn)擊右側(cè)的預(yù)覽,來(lái)看一下
以上就是本地圖片的簡(jiǎn)單使用,接下來(lái)我們對(duì)網(wǎng)絡(luò)圖片進(jìn)行同樣的操作,
引用網(wǎng)絡(luò)圖片時(shí)記得添加權(quán)限
引用網(wǎng)絡(luò)圖片時(shí)記得添加權(quán)限。 方法:需要在config.json(FA模型)或者module.json5(Stage模型)對(duì)應(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ǎn)單的使用
總結(jié)
本文主要講解了Image組件的簡(jiǎn)單使用,包括引用本地圖片和網(wǎng)絡(luò)圖片。
審核編輯:湯梓紅
鴻蒙實(shí)驗(yàn)室 |
-
Image
+關(guān)注
關(guān)注
0文章
32瀏覽量
11849 -
組件
+關(guān)注
關(guān)注
1文章
495瀏覽量
17733 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3548瀏覽量
15743
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論