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)
相关推荐
爱笑的眼睛1116 小时前
HarmonyOS 应用开发深度解析:基于声明式UI的现代化状态管理实践
华为·harmonyos
前端世界16 小时前
HarmonyOS 实战:如何用数据压缩和解压让应用更快更省
华为·harmonyos
安卓开发者17 小时前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者17 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
森之鸟17 小时前
鸿蒙审核问题——折叠屏展开态切换时,输入框内容丢失
华为·harmonyos
不爱吃糖的程序媛17 小时前
表格底部增加一行合计功能的实现
华为·harmonyos
猫林老师1 天前
HarmonyOS 5分布式数据管理初探:实现跨设备数据同步
分布式·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:ArkUI 声明式 UI 与现代化状态管理最佳实践
华为·harmonyos
被开发耽误的大厨1 天前
鸿蒙项目篇-22-项目功能结构说明-写子页面和导航页面
android·华为·harmonyos·鸿蒙
祥睿夫子2 天前
鸿蒙 ArkTS 类继承与多态实战:从语法到员工工资计算全指南
harmonyos