HarmonyOS 鸿蒙Next 自定义组件，用于加载网络图片并转换为 base64

HarmonyOS 鸿蒙Next 自定义组件，用于加载网络图片并转换为 base64

自定义组件，用于加载网络图片并转换为 base64。

遇到的问题： 公司的项目API接口设置了 User-Agent ，导致鸿蒙组件Image无法直接调用图片地址。思路：请求API后转换成base64，封装成组件。

代码实现

import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';
import util from '@ohos.util';
import { LogUtil, StrUtil, ToastUtil } from '@pura/harmony-utils';
// 自定义组件，用于加载网络图片并转换为 base64
@Component
export  struct NetworkImageLoader {
 @Prop imageUrl: string; // 网络图片的 URL
 @Prop Border: BorderOptions = {}
 @State base64String: string = '';

 aboutToAppear(): void {
 this.loadImage();
 }

 loadImage() {
   let httpRequest = http.createHttp();
   httpRequest.request(this.imageUrl,
     {
       header:{ 'User-Agent':'123' }
     },
     (error, data) => {
     if (error) {
       httpRequest.destroy();
       console.error(`http request failed with. Code: ${error.code}, message: ${error.message}`);
     } else {
       let code = data.responseCode;
       if (code === http.ResponseCode.OK) {
         let imageData = data.result as ArrayBuffer;
         this.convertImageDataToBase64(imageData);
       } else {
         httpRequest.destroy();
         console.error(`HTTP request failed with status code: ${code}`);
       }
     }
   });
 }

 convertImageDataToBase64(imageData: ArrayBuffer) {
   let base64 = new util.Base64Helper();
   let data = base64.encodeToStringSync(new Uint8Array(imageData));
   this.base64String = `data:image/jpeg;base64,${data}`;

  console.log(this.base64String);

 }

 build() {
   // 使用 Image 组件显示 base64 编码的图片
   Image(this.base64String)
     //.borderRadius(this.Radius)
     .border(this.Border)
 }
}