如何请求并加载网络图片

场景说明

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

效果呈现

本例效果如下：

运行环境

IDE：DevEco Studio 3.1 Beta1
SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)

实现思路

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

开发步骤

申请网络权限。使用http请求需要先申请网络权限，在module.json5文件中添加以下配置：
```
"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)
  }
}