Base64转图片 adtd 表格 vue3

Base64转图片通常用于将二进制数据（如图像文件）编码成文本形式，以便在网络传输或存储时更安全、紧凑。在Vue3项目中，你可以通过以下步骤将Base64字符串转换为图片并在表格中显示：

1. 首先，你需要有一个包含Base64编码的`data:image/*`格式的字符串。例如：

let base64Image = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

2. 使用JavaScript库，比如`js-base64`或者浏览器原生的`atob()`函数解码Base64字符串：

import jsBase64 from 'js-base64';

let decodedData = jsBase64.decode(base64Image);

3. 将解码后的数据创建一个Blob对象，然后可以使用HTML5的FileReader API读取它：

let blob = new Blob([decodedData], {type: 'image/jpeg'});
let reader = new FileReader();
reader.readAsDataURL(blob); // 返回一个URL
reader.onload = function(e) {
  let imageUrl = e.target.result;
  // 现在你可以在表格单元格的v-bind:class或其他属性中设置这个imageUrl
};

4. 在模板中（假设使用的是Vue CLI构建的项目），你可以将图片URL绑定到表格元素上：

<template>
  <table>
    <tr>
      <td :style="{backgroundImage: 'url(' + imageUrl + ')' }">图片</td>
    </tr>
  </table>
</template>