Image component in ETS development mode of openharmony application development

Today I will show you ETS In the development mode Image Components

author ： nuts

official account ："

Big front end tour

"

OpenHarmony Preacher ,InfoQ Signed on ,CSDN Blogger , Huawei cloud sharing expert , Alibaba cloud expert Blogger ,51CTO Chief experience officer of Blog ,

Open source project GVA One of the members

, Focus on the sharing of large front-end technology , Include Flutter, Hongmeng , Applet , Android ,VUE,JavaScript.

Image

Picture components , Support rendering and display of local pictures and network pictures .

We can take a look at the content of his interface

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


src:string|PixelMap  The image URI, Support local pictures and network paths , Support the use of media PixelMap object .

PixelMap: Image pixel class , It is used to read or write image data and obtain image information . Calling PixelMap Before the method of , Need to go through first createPixelMap Create a PixelMap example . Here I will only talk about the previous parameter .

quote App Local pictures

Here is a demonstration of how to reference through an interface App Local pictures . Image format supports “png/jpg/gif/svg”, Picture files can be stored in media Media directory 、 Or self created “/common/images” Catalog

I put two pictures related to Hongmeng in the project , It's all different , Easy to distinguish , Next , We use them in the project .

@Entry
@Component
struct Index {
 @State message: string = 'Hello World'

 build() {
 Row() {
 Column() {
 Text("media Media resources under the directory ").fontSize(32).fontColor(Color.Orange)
 Image($r("app.media.HarmonyOS")) // media Media resources under the directory
 .width("100%")
 .aspectRatio(1.5)
 Text("/common/images Pictures under the directory ").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
 Image("/common/images/HarmonyOS.jpg") // /common/images Pictures under the directory
 .width("100%")
 .aspectRatio(1.5)
 }
 .width('100%')
 }
 .height('100%')
 }
}


We click the preview on the right , Take a look at

The above is the simple use of local pictures , Next, let's do the same for the network pictures ,

Remember to add permissions when quoting network pictures

Remember to add permissions when quoting network pictures .** Method ：** Need to be in config.json（FA Model ） perhaps module.json5（Stage Model ） Corresponding "abilities" Add network permission in ohos.permission.INTERNET.

"abilities": [
 {
 ...
 "permissions": ["ohos.permission.INTERNET"],
 ...
 }
] 

@Entry
@Component
struct Index {
 @State message: string = 'Hello World'

 build() {
 Row() {
 Column() {
 Text("media Media resources under the directory ").fontSize(32).fontColor(Color.Orange)
 Image($r("app.media.HarmonyOS")) // media Media resources under the directory
 .width("100%")
 .aspectRatio(2.6)
 Text("/common/images Pictures under the directory ").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
 Image("/common/images/HarmonyOS.jpg") // /common/images Pictures under the directory
 .width("100%")
 .aspectRatio(2.6)
 Text(" Network picture ,jpg Format ").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
 Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images Pictures under the directory
 .width("100%")
 .aspectRatio(2.6)
 }
 .width('100%')
 }
 .height('100%')
 }
}


That's all Image Simplest use

summary

This article mainly explains Image Simple use of components , Including quoting local pictures and online pictures .