HarmonyOS开发应用---ArkUI组件---Image组件

Image：图片显示组件

1、声明Image组件并设置图片源：

Image(src: string|PixelMap|Resource)

• string格式，通常用来加载网络图片，需要申请网络访问权限：ohos.permission.INTERNE

                Image('https://xxx.png') 

• PixelMap格式，可以加载像素图，常用在图片编辑中 

                Image(pixelMapObject) 

• Resource格式，记载本地图片，最常用的，推荐使用   

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

                        app. -- 固定写法

                        省略了图片后缀名

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

                        图片后缀名不可省略

2、添加图片属性

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

            .width(100)        //宽度

            .height(120)        //高度

            .borderRadius        //边框圆角

            .initerpollation(ImageInterpol.High)        //图片插值：像低分辨率的图片一旦放大后会出现锯齿，如果设置了图片插值会把锯齿弥补起来，是清晰度变高

像width、height、borderRadius这些属性在其他组件也可使用，被称为组件通用属性

像initerpollation这种，是组件特有属性

实例

1、string格式

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#36D')
          .onClick(() =>{
            this.message = 'Hello ArkTS'
          })

        Image('https://tse2-mm.cn.bing.net/th/id/OIP-C.OaAIiK_vhN6wF6uIq5S3ogHaFj?w=231&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7')
          .width(250)   //默认数字格式有默认的单位vt（虚拟像素：根据设备的像素密度进行换算，确保同样的元素在不同设备上的大小是统一的）
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果：

为什么没有配置网络权限，还能展示？

原因：这不是一个真正的设备，是一个预览器，如果跑的一个真的设备上就需要配置网络权限

如何跑到一个真实的设备上

• 用一个真实的手机去调试
• 用模拟器

模拟器安装参考以下文档：安装DevEcoStudio - 飞书云文档 (feishu.cn)

模拟器安装完成后，点击右上角的运行部署到模拟器上

发现’Hello World‘已经展示出来，但是通过网络地址写入的图片没有加载进来，原因就是没有配置网络权限

配置网络权限官方教程：访问控制授权申请-快速入门-入门-HarmonyOS应用开发

 

首先找到module.json5文件

加入上图红框内代码，保存

重新运行实例代码

图片成功加载出来

2、PixelMap格式

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

但是显示出来图片有些模糊，有锯齿，这时候需要设置插值

通过配置下方图片中红框内的代码实现，可以看出图片变清晰了