1.引用网络图片资源
引入网络图片需要申请权限ohos.permission.INTERNET,此时,Image组件的src参数为网络图片的链接,为了成功加载网络图片,您需要在module.json5文件中申请网络访问权限
注意:实际可用的时候,首先需要保证网络地址可以访问,可以在浏览器中地址栏直接输如图像链接地址。同时,使用内网环境可能导致图片访问失败,可以断开网络代理尝试,接下来请看详细步骤
- 引入网络图片需要申请ohos.permission.INTERNET,可在module.json5文件中声明网络访问权限
代码示例
1 2 3 4 5
| "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ]
|

- 在保证图片地址可以访问的情况下,将地址写入Image组件当中
以我的图片网络地址为例
1
| https://img-blog.csdnimg.cn/img_convert/0bac102fe78698223fd63e80deee14b2.png"
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| @Entry @Component struct ImageExample { build() { Column() { Row() { Image("https://img-blog.csdnimg.cn/img_convert/0bac102fe78698223fd63e80deee14b2.png") .objectFit(ImageFit.Contain) }.width('100%') }.height('100%') .justifyContent(FlexAlign.Center) .backgroundColor(Color.Pink) } }
|
但是图片并不会显示,这时候可以使用alt属性设置占位图,然后就能成功显示了
1 2 3 4 5 6 7
| Image("https://www.example.com/xxx.png")
.alt($r('app.media.icon'))
.width(100)
.height(100)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| @Entry @Component struct ImageExample { build() { Column() { Row() { Image("https://img-blog.csdnimg.cn/img_convert/0bac102fe78698223fd63e80deee14b2.png") .alt($r('app.media.icon')) .width(400) .height(400) .objectFit(ImageFit.Contain) }.width('100%') }.height('100%') .justifyContent(FlexAlign.Center) .backgroundColor(Color.Pink) } }
|

v1.5.2