HarmonyOS鸿蒙Next ArkUI中image加载base64图片实现方案

HarmonyOS鸿蒙Next ArkUI中image加载base64图片实现方案 image 如何加载 base64 格式的图片，类似于安卓将 base64 串转成 bitmap 之后再展示

3 回复

Image支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。

示例：

Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAABN0lEQVR42mP4P8IAAy0Mjf6xAYxHnIcHo6cZaOlZYj38VbESjIech5E9SayHYZ5FxnT1cL7uFwxMbt4lxtPYPElLjzNg8ywhMWp6GOZBeiVzDA/jinFySmZSkzUpHn5oLosXk+1hYj2NXliRUnjh8hy5MYzP0wzEeIzUvEyNGCY3WZMUw5Qm61EPjzQPkwIGjYfp4VlsnianIULIs3gbHvT2LLZWFzVLZ7xNS3p7lBqAGM+CPZy6o+w/DGfvrv5ffagTjtuOT/4/8cxcOF50Zc3/5dc3wvHeh0fh+PDjk/8vv74Bx/c+PPz/8utrOP7559fg8LD/uqT/A4GpHdB7Q/XBmFBAMyBLPv70DCWWTjw7h2L42pvbUCxGdlTPqRkoji7Y24DiqdCN6f8HKnCRMcNA5bmBCmgACwohlRAJ3H4AAAAASUVORK5CYII=')

更多关于HarmonyOS鸿蒙Next ArkUI中image加载base64图片实现方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ArkUI加载Base64图片可以通过Image组件的src属性直接指定Base64编码的图片数据。Base64编码的图片数据通常以data:image/png;base64,或data:image/jpeg;base64,等开头，后接Base64编码的图片内容。

具体实现步骤如下：

  1. 准备Base64图片数据：确保你有一个有效的Base64编码图片数据，例如：

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABUSURBVDhPY2AYBYMCoNQJ6M7Ozv+DwQ0bNoD5DAwM/5WUlP6DMSMjI1hgw4YN/8HqQHwwgHOAQCBgQHv37v0PZjQ3N4MFgEAwMjISHFhQABUABAAABFhB0qY2yPUAAAAASUVORK5CYII=

  2. 在ArkUI中使用Image组件：在ArkUI的.ets文件中，使用Image组件，并将src属性设置为Base64编码的图片数据。

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
    build() {
        Column() {
            Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABUSURBVDhPY2AYBYMCoNQJ6M7Ozv+DwQ0bNoD5DAwM/5WUlP6DMSMjI1hgw4YN/8HqQHwwgHOAQCBgQHv37v0PZjQ3N4MFgEAwMjISHFhQABUABAAABFhB0qY2yPUAAAAASUVORK5CYII=')
            .width(100)
            .height(100)
        }
    }
}

  3. 运行应用：编译并运行应用，Image组件将加载并显示Base64编码的图片。

通过以上步骤，你可以在HarmonyOS鸿蒙Next的ArkUI中成功加载并显示Base64图片。

在HarmonyOS鸿蒙Next的ArkUI中，可以通过Image组件加载Base64编码的图片。具体实现步骤如下：

  1. 准备Base64数据：确保你有一个Base64编码的图片字符串，通常以data:image/png;base64,或data:image/jpeg;base64,开头。

  2. 使用Image组件：在ArkUI中，使用Image组件的src属性来加载Base64图片。直接将Base64字符串赋值给src即可。

Image(this.base64ImageStr)
  .width(100)
  .height(100)
  1. 动态加载：如果需要动态加载，可以将Base64字符串存储在@State变量中，并在Image组件中引用。
@State base64ImageStr: string = 'data:image/png;base64,...';

Image(this.base64ImageStr)
  .width(100)
  .height(100)

通过以上步骤，即可在ArkUI中成功加载并显示Base64编码的图片。

回到顶部