鸿蒙arkts的图片资源引入方式和样式的复用方式

大家好我是海岛，分享一下在传智博学谷学习的一些知识技术。

关于arkts语言的图片资源引入方式目前有下面三种，大家随意选用就好，都可以实现效果。

 组件内的样式不需要使用function 关键字声明，而组件外的样式需要function声明，需要在加上@style修饰符。

效果图如下

完整代码如下

@Entry
@Component
struct demo {
  @Styles
  imgStyle(){
    .width(80)
    .height(80)
  }

  build() {
    Row() {
      Column({ space: 20 }) {
        //   方式一: 使用$提示符选择第一个从app.media选择图片，不需要图片后缀名,图片资源放在resources>base>media文件夹中
        Image($r("app.media.106")).imgStyle()
        //   方式二:使用$提示符选择第二个，图片资源放在resources文件夹的rawfile文件夹中
        Image($rawfile("106.jpg")).imgStyle()
        //   方式三:直接写图片路径，放在assets文件夹下，如果是网络图片地址，也是直接使用这个方式复制网络图片的地址即可
        Image("/assets/106.jpg").imgStyle2()
        //   网络图片显示写法
        Image("https://wx2.sinaimg.cn/mw690/005to85Yly1hislbd5s9yj35k63pge87.jpg").imgStyle2()
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Styles
function  imgStyle2(){
  .width(120)
  .height(120)
}