base64 转化为图片 antd 表格 vue3

Base64是一种将二进制数据编码成ASCII字符的格式，常用于在网络上传输图像文件。当需要将Base64编码的图片显示在Ant Design（antd）的表格组件中，并在Vue3应用中实现，可以按照以下步骤操作：

1. 首先，你需要有一个Base64编码的图片字符串。假设它是`data:image/jpeg;base64,/9j/4AAQSk...`。

2. 安装必要的依赖：在Vue3项目中，确保已经安装了`@antv/vue-g2`库，这是Ant Design在Vue3中的图表组件。如果还没有安装，可以运行`npm install @antv/vue-g2`.

3. 在Vue组件中，创建一个列模板（column template），这个模板用于处理渲染Base64图片。例如：

<template>
  <g2-table :columns="columns" :data="data">
    <template slot-scope="{ record }">
      <div :style="{ background: `url(data:image/jpeg;charset=utf-8;base64,${record.base64Image}) center no-repeat` }"></div>
    </template>
  </g2-table>
</template>

<script setup>
import { ref } from 'vue';
import { Table, Column } from '@antv/g2-vue';

const data = [
  // 每行包含Base64图片的数据
  {
    id: 1,
    base64Image: 'your_base64_string',
  },
  ... // 其他数据项
];

const columns = [
  // 定义列，其中一列可以绑定到base64Image字段
  {
    title: '图片',
    dataIndex: 'base64Image',
    cell: (row) => `<div :style="{ background: `url(data:image/jpeg;charset=utf-8;base64,${row.base64Image}) center no-repeat` }"></div>`,
  },
];
</script>

在这个例子中，我们将Base64编码的图片作为CSS背景样式直接应用于单元格。