ArkTS 常用组件-图片（Image）

ArkTS 常用组件-图片（Image）概述参数常用属性图片尺寸图片缩放图片插值

概述

Image为图片组件，用于在应用中显示图片。

地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-image-V13

参数

**Image**组件的参数类型为string | Resource | media.PixelMap，相关案例见

 Column() {

       // `**Image**`组件的参数类型为`string | Resource | media.PixelMap`

       Button('参数')

       // 使用这种方式引入本地图片，需要将图片置于`ets`目录下，并且需要为`Image`组件提供图片相对于`ets`目录的路径。

       Image('/pages/component/image/no_order.png')

         .width(200).height(200)

       // 网络图片 注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。

       Image('http://static.tech-harry.cn/typora/a5fb5917ebb0439bb0626489aaa4f1b0.png')

         .width(200).height(200)

       // 可通过`$r('app.media.no_order')`引用

       Image($r('app.media.no_order'))

         .width(200).height(200)

       // 通过`$rawfile('no_order.png')`的方式引用

       Image($rawfile('no_order.png'))

         .width(200).height(200)

     }

• string类型
  

string类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。

• 本地图片
  

Image('/pages/component/image/no_order.png')

注意：使用这种方式引入本地图片，需要将图片置于ets目录下，并且需要为Image组件提供图片相对于ets目录的路径。

• 网络图片
  

Image('http://static.tech-harry.cn/typora/a5fxxxb0.png')

注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。权限配置相关的内容在后续章节会系统介绍。

• **Resource**类型
  

Resource类型的参数用于引入 resources 目录下的图片。

resources目录下可用于存放图片的目录有resources/*/media 以及 resources/rawfile，两个目录下图片的使用方式有所不同，下面逐一介绍

• media目录
  

该目录下的资源，需要使用$r('app.media.<filename>')的方式引用。

注意：无需指定具体版本，系统会自动根据所处环境选择相应版本

示例中的no_order.png图片，可通过Image($r('app.media.no_order'))引用。需要注意的是$r()的返回值即为 **Resource** 类型，因此可以直接将$r('app.media.no_order')作为 Image 组件的参数，例如Image($r('app.media.img'))。

• rawfile目录
  

该目录下的资源，可通过$rawfile('path/to/your/file')的方式引用，文件的路径为相对于 rawfile 的路径。示例中的no_order.png，须使用$rawfile('no_order.png)引用。需要注意的是，$rawfile()的返回值也是Resource类型，因此其也可以直接作为 Image 组件的参数，如Image($rawfile('no_order.png))。

常用属性

图片尺寸

图片尺寸可通过width()方法和height()方法进行设置。例如

 Column() {

   Button('常用属性')

   // 图片尺寸可通过`width()`方法和`height()`方法进行设置

   // `string`类型的参数可为百分比，例如`'100%'`，或者为具体尺寸，例如`'100px'`

   Image($r('app.media.no_order'))

     .width(100)

     .height(100)

 }

两个方法可接收的参数类型均为string | number | Resource。

下面对三种参数类型逐一进行介绍。

• **string**类型
  

string类型的参数可为百分比，例如'100%'，或者为具体尺寸，例如'100px'。具体尺寸的单位，常用的有两个，分别是px和vp

• **number**类型
  

number类型的参数，默认以vp作为单位。

• **Resource**类型
  

Resource类型参数用于引用resources下的element目录中定义的数值。

引用element目录中的数值，同样需要使用$r()函数。要了解具体语法，需要先熟悉element目录下的文件内容。

图片缩放

当图片的原始大小与Image组件不同时，可通过objectFit()方法来设置图片的显示效果。该方法的参数类型为ImageFit枚举类型，可选的枚举值如下

     Column({ space: 20 }) {

       Column() {

         Button('图片缩放')

         Image($r('app.media.img'))

           .width('730px')

           .height('280px')

         Text('原图')

       }

       Row({ space: 20 }) {

         // `ImageFit.None`保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。

         Column() {

           Image($r('app.media.img'))

             .width('450px')

             .height('450px')

             .borderWidth(1)

             .objectFit(ImageFit.None)

           Text('ImageFit.None')

         }

         //`ImageFit.Contain`保持宽高比进行缩小或者放大，使得显示区域刚好包含整个图片。

         Column() {

           Image($r('app.media.img'))

             .width('450px')

             .height('450px')

             .borderWidth(1)

             .objectFit(ImageFit.Contain)

           Text('ImageFit.Contain')

         }

       }

       Row({ space: 20 }) {

         // `ImageFit.Cover`保持宽高比进行缩小或者放大，使得图片刚好完全覆盖显示区域。

         Column() {

           Image($r('app.media.img'))

             .width('450px')

             .height('450px')

             .borderWidth(1)

             .objectFit(ImageFit.Cover)

           Text('ImageFit.Cover')

         }

         // `ImageFit.Fill`不保持宽高比进行放大缩小，使得图片充满显示区域。

         Column() {

           Image($r('app.media.img'))

             .width('450px')

             .height('450px')

             .borderWidth(1)

             .objectFit(ImageFit.Fill)

           Text('ImageFit.Fill')

         }

       }

       Row({ space: 20 }) {

         // `ImageFit.ScaleDown`保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。

         Column() {

           Image($r('app.media.img'))

             .width('450px')

             .height('450px')

             .borderWidth(1)

             .objectFit(ImageFit.ScaleDown)

           Text('ImageFit.ScaleDown')

         }

         // `ImageFit.Auto`自适应显示

         Column() {

           Image($r('app.media.img'))

             .width('450px')

             .height('450px')

             .borderWidth(1)

             .objectFit(ImageFit.Auto)

           Text('ImageFit.Auto')

         }

       }

     }

各选项的效果如下图所示

图片插值

当原图分辨率较低并且需要放大显示时，图片会模糊并出现锯齿。如下图所示

这时可以使用interpolation()方法对图片进行插值，使图片显示得更清晰。该方法的参数为ImageInterpolation枚举类型，可选的值有

Column({ space: 20 }) {

       Column() {

         Button('图片插值')

         Text('原图分辨率 40px*40px')

         Row() {

           Column() {

             Image($r('app.media.interpolation'))

               .width(100)

               .height(100)

               .interpolation(ImageInterpolation.None)

             Text('None')

           }

           Column() {

             Image($r('app.media.interpolation'))

               .width(100)

               .height(100)

               .interpolation(ImageInterpolation.Low)

             Text('Low')

           }

         }

         Row() {

           Column() {

             Image($r('app.media.interpolation'))

               .width(100)

               .height(100)

               .interpolation(ImageInterpolation.Medium)

             Text('Medium')

           }

           Column() {

             Image($r('app.media.interpolation'))

               .width(100)

               .height(100)

               .interpolation(ImageInterpolation.High)

             Text('High')

           }

         }

       }

     }

各选项效果如下图所示

关注我,公众号搜“Harry技术”带你看不一样的人间烟火！