HarmonyOS 开发基础（二）Image

HarmonyOS 开发基础（二）Image

@Entry
@Component
struct Index {
   
  // 创建一个状态变量 img 存储 img 网络地址
  @State img: string = 'https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=f78ab44b6c79d50010356b808487b695'
  build() {
   
    Row() {
   
      Column() {
   
        // Image：ArkUI 的基础组件 图片组件
        // string 格式，通常用来加载网络图片，需要申请网络访问权：ohos.permission.INTERNET
        Image(this.img)
          // width：属性方法，设置组件的宽度
          .width(250)
        // PixelMap 格式，可以加载像素图，常用在图片编辑中
        Image(this.img)
          .width(200)
        // PixelMap 格式，加载本地图片，推荐使用
        // PixelMap 分两种引入方式;
        // $r()：导入路径，main/resources/base/media
        // $rawfile()：导入路径，main/rawfile
        Image($r('app.media.icon'))
          .width(150)
          // 插值效果，减轻低清晰度图片在放大显示的时候出现的锯齿问题
          .interpolation(ImageInterpolation.High)
        Image($rawfile('icon1.png'))
          .width(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

一、Image 加载网络图片，申请网络访问权限

1、打开 module.json5 文件，在 module 里面设置 requestPermissions 对象，添加 ohos.permission.INTERNET 网络权限

2、ohos.permission.INTERNET 为 system_grant 设置访问权限即可

.permission.INTERNET 为 system_grant 设置访问权限即可