Detailed explanation of the Image component in the ETS development method of OpenHarmony application development

I am participating in the recruitment of the creator signing program of the Nuggets Technology Community, click the link to register and submit .

Today, I will take you to understand the Image component in the ETS development method

Author: Nuts

Public account: " Big Front-End Tour "

OpenHarmony preacher, InfoQ contract author, CSDN blog expert, Huawei cloud sharing expert, Alibaba Cloud expert blogger, 51CTO blog chief experience officer, one of the members of the open source project GVA , focusing on the sharing of big front-end technologies, including Flutter, Hongmeng, small Program, Android, Vue, JavaScript.

Image

The picture component supports the rendering and display of local pictures and network pictures.

We can take a look at what his interface has

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

src:string|PixelMap image URI, supports local images and network paths, supports the use of media PixelMap objects.

PixelMap: Image pixel class, used to read or write image data and obtain image information. Before calling the PixelMap method, you need to create a PixelMap instance through createPixelMap. Here I only talk about the first parameter.

Refer to App local image

Here we first demonstrate how to reference the local image of the App through the interface. The image format supports "png/jpg/gif/svg", and the image files can be stored in the media media directory, or the "/common/images" directory created by yourself

I put two pictures related to Hongmeng in the project, they are different and easy to distinguish. Next, we will use them in the project.

@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%')
  }
}

Let's click on the preview on the right to take a look

The above is the simple use of local pictures. Next, we will do the same for network pictures.

Remember to add permissions when citing network images

引用网络图片时记得添加权限。 方法： 需要在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%')
  }
}

接下来我们继续接着对通用属性之外的其他特有属性来进行学习

首先来个预览：

接下来，我将对其中的属性一一了解

.alt(string | PixelMap)：

加载时显示的占位图。支持本地图片和网络路径，支持使用媒体PixelMap对象。

示例代码：

@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%")
​
//        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)
        Text("alt属性").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg")
      }
      .width('100%')
    }
    .height('100%')
  }
}

大家可以看到的就是/common/images/HarmonyOS.jpg为加载时显示的占位图

. objectFit (ImageFit)： 设置图片的缩放类型。

          /**
           * .objectFit(ImageFit) 设置图片的缩放类型，默认值Cover。
           *    ImageFit.Cover 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
           *    ImageFit.Contain 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
           *    ImageFit.Fill 不保持宽高比进行放大缩小，使得图片填充满显示边界。
           *    ImageFit.None 保持原有尺寸显示。通常配合objectRepeat属性一起使用。
           *    ImageFit.ScaleDown 保持宽高比显示，图片缩小或者保持不变。
           */

@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%")
​
//        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)
//        Text("alt属性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
         .objectFit(ImageFit.Cover)
        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Contain)
        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.ScaleDown)
        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Fill)
      }
      .width('100%')
​
​
    }
    .height('100%')
  }
}

. objectRepeat (ImageRepeat): 设置图片的重复样式。

ImageRepeat枚举说明

名称	描述
X	只在水平轴上重复绘制图片。
Y	只在竖直轴上重复绘制图片。
XY	在两个轴上重复绘制图片。
NoRepeat	不重复绘制图片。

. interpolation (ImageInterpolation)： 设置图片的插值效果，仅针对图片放大插值。

对于一些较小的图片，或老照片，插值计算有助于提升画质。下面是它的一些参数

ImageInterpolation

名称	描述
None	不使用插值图片数据。
High	插值图片数据的使用率高，可能会影响图片渲染的速度。
Medium	插值图片数据的使用率中。
Low	插值图片数据的使用率低。

. renderMode (ImageRenderMode)： 设置图片渲染的模式。 相当于PS中对图片做去色处理，可将彩色图片变为灰度图片。

ImageRenderMode

名称	描述
Original	按照原图进行渲染，包括颜色。
Template	将图片渲染为模板图片，忽略图片的颜色信息

@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%")
​
//        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)
//        Text("alt属性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
//        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//         .objectFit(ImageFit.Cover)
//        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Contain)
//        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.ScaleDown)
//        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Fill)
        Text("ImageRenderMode.Original").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Original) // 按照原图进行渲染，包括颜色
        Text("ImageRenderMode.Template").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Template) // 按照原图进行渲染，包括颜色
      }
      .width('100%')
​
​
    }
    .height('100%')
  }
}

.sourceSize({width: number,height: number}): Set the decoding size of the picture, and decode the original picture into a picture of the specified size. The unit of number type is px.

A picture with an original size of 1140x570 pixels, after specifying a picture with a decoding size of 120x100 pixels, if the display size of the picture exceeds this size, it will be blurred. The sample code is as follows:

 Text("原图").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
​
        Text("解码为小尺寸后显示模糊").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6).sourceSize({
          width: 120,
          height: 100
        }) // 解码为小尺寸后显示模糊

Of course, in addition to these, there are other properties

Event properties

1. onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void): This callback is triggered when the picture is loaded successfully, and the picture that is loaded successfully is returned. source size.

• width: The width of the image, in pixels.
• height: The height of the image, in pixels.
• componentWidth: The width of the component, in pixels.
• componentHeight: The height of the component, in pixels.
• loadingStatus: The status of the image loading successfully.

2. onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void): This callback is triggered when the image loading is abnormal.

3. onFinish(callback: () => void) When the loaded source file is an svg image with animation, this callback will be triggered when the svg animation is played, if the animation is an infinite loop animation, it will not be triggered this callback.

 Text("原图").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6).onComplete((msg: { width: number,height: number,componentWidth: number,
 componentHeight: number, loadingStatus: number }) => {
​
          console.log(msg.width.toString());
        })
          .onError(() => {
            console.log('加载图片失败')
          })
          .onFinish(() => {
            //当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。
          })
​
​

The above is the simplest use of Image

Summarize

This article mainly explains the simple use of the Image component, including referencing local images and network images.