HarmonyOS【ArkUI组件---Image组件】

1.实现效果

2.Image:图片显示组件

3.通过网络图片

javascript 复制代码
@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://res.vmallres.com/uomcdn/CN/cms/202406/2db7e1ea3fbf40fbac8adce59b04f44d.png')
          .width(250)
      }

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

4.网络访问权限

当我们没有配置权限的时候,只能在预览器中看见网络图片,在模拟器上不可以

打开module.json5文件

javascript 复制代码
 "requestPermissions": [
      {
        "name":"ohos.permission.INTERNET"
      }
    ],

添加之后,效果如下图所示 :

5.本地图片

javascript 复制代码
 Image($r('app.media.app_icon'))
          .width(250)
          .interpolation(ImageInterpolation.High)
相关推荐
爱笑的眼睛111 天前
深入浅出ArkTS:HarmonyOS应用开发的现代化语法解析
华为·harmonyos
Kisang.1 天前
【HarmonyOS】窗口管理实战指南
前端·华为·typescript·harmonyos·鸿蒙
it技术1 天前
鸿蒙HarmonyOS实战开发系列课程
harmonyos
●VON2 天前
重生之我在大学自学鸿蒙开发第一天-《基础篇》
学习·华为·harmonyos·鸿蒙
浅蓝色2 天前
flutter平台判断后续
flutter·harmonyos
程序员潘Sir2 天前
鸿蒙应用开发从入门到实战(二十):ArkUI内置弹窗组件
harmonyos·鸿蒙
旺仔Sec2 天前
2025年江西省职业院校技能大赛高职组鸿蒙应用开发赛项竞赛任务书
华为·harmonyos
Georgewu2 天前
【HarmonyOS AI赋能】朗读控件详解
harmonyos
安卓开发者2 天前
鸿蒙Next文件上传下载:全场景高效数据传输方案
华为·harmonyos