Explore the Hongmeng Image display component

Image 

Declare the Image component and set the image source

Image(src: stirng|PixelMap|Resource)

1. string is usually used to load network images, and you need to apply for network access permission: ohos.permission.INIERNET Image('https://xxx.png')
2. PixelMap can load pixel images and is commonly used in image editing. Image(pixelMapObject) is very cumbersome to use and is not commonly used.

3. Resource format, load local images, it is recommended to use Image($r('app.media.cat')) to omit the suffix name, Image($rawfile('cat.png')) to read the rawfile directory suffix name is indispensable;

Web image

Import an online picture from the Internet to view the effect 

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Image('https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500')
          .width(250) // 固定宽高  // 预览无权限要求 但是真机调试需要权限


      }

      .width('100%')
    }
    .height('100%')
  }
}

Using network images in development tools does not require permission settings, but real-machine debugging requires configuring permissions.

In the Document Center  , we can view the corresponding permission configuration documents here.

The permission list  here contains all the permissions we may use during real machine debugging, which are divided into two types: system_grant system authorization and user_grant user authorization. 

Let’s actually configure the permissions of network images.

Permission configuration

1. Find the corresponding permissions

2. Find the module.json5 file

3. Add permissions in module

Add the requestPermissions item in mudoles. This will be automatically completed without remembering. It is an array. Put objects in the array and configure the permissions you need in each object. This will increase our permissions.

Tests need to be re-released to run.

All network requests require this permission.

 

Importing local pictures

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Image($r('app.media.hongmeng'))
          .width(250);

      }

      .width('100%')
    }
    .height('100%')
  }
}

Tips 

Tip, move into our UI component, a pop-up window will appear, from where you can enter the built-in browser to view the API

Therefore, we can directly refer to the documentation for Hongmeng native development.