| harmony 鸿蒙如何请求并加载网络图片 | 您所在的位置：网站首页 › 帝豪t938度酒多少钱 › harmony 鸿蒙如何请求并加载网络图片 |
harmony 鸿蒙如何请求并加载网络图片
|
如何请求并加载网络图片
场景说明
加载网络图片时，如果直接在Image组件中写入图片的url链接，当网速较慢或者图片较大时，可能导致Image组件加载不出图片。因此，建议使用http接口请求图片数据，等数据返回后通过状态变量实时将图片加载到页面上，这样就能保证图片的渲染。本例将为大家介绍如何实现上述场景。 效果呈现本例效果如下：
申请网络权限。 使用http请求需要先申请网络权限，在module.json5文件中添加以下配置： json "requestPermissions":[ { "name": "ohos.permission.INTERNET", }, ] 构建UI框架。 @Entry @Component struct NetPic { // 先创建一个PixelMap状态变量用于接收网络图片数据 @State image: PixelMap = undefined build() { Column({ space: 10 }) { Button("获取网络图片") .onClick(() => { this.httpRequest(); }) Image().height(100).width(100) } .width('100%') .height('100%') .padding(10) } }先使用http请求获取图片数据，再通过image.createImageSource()将获取到的数据转化为图片源实例，然后调用createPixelMap()将图片数据解析为pixelmap。 @Entry @Component struct NetPic { // 先创建一个PixelMap状态变量用于接收网络图片 @State image: PixelMap = undefined // 网络图片请求方法 httpRequest() { let httpRequest = http.createHttp(); httpRequest.request( //网络图片地址 "https://images.openharmony.cn/330-%E8%BF%90%E8%90%…%BE/%E6%B4%BB%E5%8A%A8/419/3.2releas-1920-480.jpg", (error, data) => { if (error) { console.log("error code: " + error.code + ", msg: " + error.message) } else { let code = data.responseCode if (ResponseCode.ResponseCode.OK == code) { let res: any = data.result //通过获取到的uri创建图片源实例。 let imageSource = image.createImageSource(res) let options = { // 透明度 alphaType: 0, // 是否可编辑 editable: false, // 像素格式 pixelFormat: 3, // 缩略值 scaleMode: 1, // 创建图片大小 size: { height: 100, width: 100 } } //将图片数据解析为pixelmap，并设置option属性。 imageSource.createPixelMap(options).then((pixelMap) => { // 将pixelmap通过状态变量image传递给Image组件，将图片信息加载出来。 this.image = pixelMap }) } else { console.log("response code: " + code); } } } ) } ... }将状态变量image传递给Image组件，将图片加载出来。 ... build() { Column({ space: 10 }) { Button("获取网络图片") .onClick(() => { this.httpRequest(); }) // 将状态变量image传递给Image组件，当image获取到图片数据时，可以实时刷新UI Image(this.image).height(100).width(100) } .width('100%') .height('100%') .padding(10) } ... 完整代码本例完整代码如下： import http from '@ohos.net.http'; import ResponseCode from '@ohos.net.http'; import image from '@ohos.multimedia.image' @Entry @Component struct NetPic { // 先创建一个PixelMap状态变量用于接收网络图片 @State image: PixelMap = undefined // 网络图片请求方法 httpRequest() { let httpRequest = http.createHttp(); httpRequest.request( //网络图片地址 "https://images.openharmony.cn/330-%E8%BF%90%E8%90%…%BE/%E6%B4%BB%E5%8A%A8/419/3.2releas-1920-480.jpg", (error, data) => { if (error) { console.log("error code: " + error.code + ", msg: " + error.message) } else { let code = data.responseCode if (ResponseCode.ResponseCode.OK == code) { let res: any = data.result //通过获取到的uri创建图片源实例。 let imageSource = image.createImageSource(res) let options = { // 透明度 alphaType: 0, // 是否可编辑 editable: false, // 像素格式 pixelFormat: 3, // 缩略值 scaleMode: 1, // 创建图片大小 size: { height: 100, width: 100 } } //将图片数据解析为pixelmap，并设置option属性。 imageSource.createPixelMap(options).then((pixelMap) => { // 将pixelmap通过状态变量image传递给Image组件，将图片信息加载出来。 this.image = pixelMap }) } else { console.log("response code: " + code); } } } ) } build() { Column({ space: 10 }) { Button("获取网络图片") .onClick(() => { this.httpRequest(); }) // 将状态变量image传递给Image组件，当image获取到图片数据时，可以实时刷新UI Image(this.image).height(100).width(100) } .width('100%') .height('100%') .padding(10) } } 参考图片处理 数据请求 权限申请指导 你可能感兴趣的鸿蒙文章harmony 鸿蒙案例介绍 harmony 鸿蒙应用质量提升案例-应用Crash闪退问题案例分析 harmony 鸿蒙应用质量提升案例-稳定性测试常见JS_ERROR问题分析与定位 harmony 鸿蒙如何通过显示动画实现书籍翻页动效 harmony 鸿蒙如何实现波纹进度条 harmony 鸿蒙折叠展开动效 harmony 鸿蒙如何实现内容下拉变化 harmony 鸿蒙如何删除多选框选项 harmony 鸿蒙如何为同一组件在不同场景下绑定不同的业务逻辑 harmony 鸿蒙分布式画布流转场景 |
【本文地址】
公司简介
联系我们