HarmonyOS 鸿蒙Next Image组件加载base64的问题

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

我想请问下Image组件加载Base64的问题，我使用

Image('data:image/[png|jpeg|bmp|webp];base64,[base64 data])

这种方式加载图片失败，提示我

failed to create image loader,image source type not supported

但是我将 base64 通过以下方法保存，却能在本地文件看到图片，不知道是不是格式需要配置或者base64需要经过处理才能显示？

export async function writeFile(data: string): Promise<string> {
  let uri = ''
  try {
    let filePath = filesDir + "/1.";
    uri = fileUri.getUriFromPath(filePath);
    let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
    console.info("file fd: " + file.fd);
    const reg = new RegExp("data:image/\\w+;base64,")
    const base64 = data.replace(reg, "");
    console.log("base64flag", base64)
    const dataBuffer = buffer.from(base64, 'base64')
    let writeLen = fileIo.writeSync(file.fd, dataBuffer.buffer);
    hilog.info(0xA0c0d0, 'uri', uri)
    fileIo.closeSync(file);
  }
  ...
}

更多关于HarmonyOS 鸿蒙Next Image组件加载base64的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

Image控件加载base64格式的图片时，只支持png|jpeg|bmp|webp|heif这几种类型的base64数据，尤其是不支持svg的base64，需要先转换为png再显示

更多关于HarmonyOS 鸿蒙Next Image组件加载base64的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你的base64格式是不是有问题，我的这个是这个正常的。

Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAoCAYAAADzL6qcAAAAAXNSR0IArs4c6QAAAfJJREFUSEvVlr9LI0EUx9/LLMQihYWCRRonO0MEC9NdedudKJx/goWCVgr6ZyhopXBX+Cd4oGiX6yyDGDizs0uapBAtUqQQYnZkwciwye68FQtv23nfD+/H980swid9+Ekc+A9AYRiuDIfDs7hkxth6pVK5pJQ/VppS6hEAZt7EvX6/P1+r1Xo22BjI9/1HRByBYv1vIcRmblAQBHta64ORUGv94jjOIue8lQUby6herzvlcvkfALiG8K8QwssFioPjhkdRdGEKC4XCalbjU32klKoDwHcDFnQ6nQXP814mZZYKarVaVUS8Q0RnJETEfdd1D3OB4mCl1C8A2DCEqXbIXJFGozFdKpXaADBtwCbawbprVDtYQVQ7WEFUO5BAb43PtAMZZLMDGTTJDlrrJynlbHyWCxQEwYnWestY6Pwg3/eXEPEGAKYM0K6U8jhXRkqpKwD4YUDuu91uzfO8ZzJIKfUTAM4TO7YmhPjzvoe2m6/dbk8NBoMGIlaN2GshxLKptTY7DMOdKIqODNEzY+wb5/yWDGo2m3PFYjG+Ld+XFhFPXdfdTlaSmVFy3ADQY4xVOecPZJBt3GSQbdwkEGXcVhB13FYQddxWUOLth7RxW0GJtz913BTQCiKeaa3j2HUp5cd+a2y7l3Zu3TUq+OuBXgHcnfopeYLs9AAAAABJRU5ErkJggg==')
  .width(17)
  .height(17)

#你问我答# 满意请采纳答案 

在HarmonyOS鸿蒙系统中，Next Image组件加载base64编码的图像数据，可以通过以下方式实现：

  1. Base64解码：首先，将base64字符串解码为二进制数据。鸿蒙系统提供了相关的API，比如Utils.base64Decode，可以将base64字符串转换成字节数组。

  2. Bitmap创建：使用解码后的二进制数据创建Bitmap对象。鸿蒙的BitmapFactory类提供了decodeByteArray方法，该方法可以接收字节数组并生成Bitmap对象。

  3. Image组件设置：将生成的Bitmap对象设置到Next Image组件中。鸿蒙的Image组件提供了setPixelMap方法，用于设置图像数据。

示例代码：

// 假设base64String是你要加载的base64图像数据
byte[] decodedBytes = Utils.base64Decode(base64String);
Bitmap bitmap = BitmapFactory.decodeByteArray(decodedBytes, 0, decodedBytes.length);
nextImageComponent.setPixelMap(bitmap);

注意：上述代码示例中的Utils.base64Decode和BitmapFactory.decodeByteArray是假设的API名称，实际使用时应参考鸿蒙系统的具体API文档。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部