Harmony 使用Image资源的4种方法

具体使用

方法一：assets 目录

• 1.新建 src/main/ets/assets/image 目录
• 2.添加 startIcon.png 图片文件

Image('/assets/image/startIcon.png')  
    .width(100)
    .aspectRatio(1)

方法二：使用网络图片

Image('https://www.jwblog.cn/images/blog/update-after.jpg')  
    .width(100)
    .aspectRatio(1)

方法三：media 目录

固定用法$r('app.media.图片名字')

• 1.ets目录下新建 src/main/resources/base/media 目录
• 2.添加 startIcon.png 图片文件

Image($r('app.media.startIcon'))  
    .width(100)
    .aspectRatio(1)

方法四：rawfile 目录

固定用法$r('$rawfile.图片名字')

• 1.在 src/main/resources/rawfile 目录下
• 2.添加 startIcon.png 图片文件

Image($rawfile("startIcon.png"))  
    .width(100)
    .aspectRatio(1)

优缺点对比

区别	assets	网络图片	media	rawfile
优点	1.可以有二级目录 2.利于维护		1.使用简单	1.使用简单
缺点		需要有网络	1.不可以有二级目录 2.不可以有文件后缀 3.必须简写(无后缀)	1.资源必须是全路径(有后缀)

网络资源遇到的问题

网络资源的图片在模拟器和真机上边不显示

• 在鸿蒙中在模拟器和真实项目中，必须申请网络权限
• 在 src/main/module.json5 文件添加以下代码

"requestPermissions": [{
    "name":"ohos.permission.INTERNET"
}],