OpenHarmony实战开发-如何请求并加载网络图片

场景说明

加载网络图片时，如果直接在Image组件中写入图片的url链接，当网速较慢或者图片较大时，可能导致Image组件加载不出图片。因此，建议使用http接口请求图片数据，等数据返回后通过状态变量实时将图片加载到页面上，这样就能保证图片的渲染。本例将为大家介绍如何实现上述场景。

效果呈现

本例效果如下：

运行环境

• IDE：DevEco Studio 3.1 Beta1
• SDK：Ohos_sdk_public 3.2.11.9 (API Version9 Release)

实现思路

• 使用http请求获取图片数据。
• 通过image.createImageSource()将获取到的数据转化为图片源实例。
• 调用createPixelMap()将图片数据解析为pixelmap。
• 将pixelmap通过状态变量传入Image组件进行渲染显示。

开发步骤

1.申请网络权限。 使用http请求需要先申请网络权限，在module.json5文件中添加以下配置：

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

2.构建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)
  }
}

3.先使用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);
          }
        }
      }
    )
  }
  ...
}

4.将状态变量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)
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……