vue3 base64格式转图片

在Vue3中，将base64格式转换为图片可以使用以下方法：
1. 首先，需要将base64字符串转换为Blob对象。可以使用以下代码实现：

function base64ToBlob(base64Str) {
  const arr = base64Str.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

2. 接下来，可以使用URL.createObjectURL()方法将Blob对象转换为URL。然后，可以将URL赋值给img标签的src属性，从而显示图片。以下是示例代码：

<template>
  <div>
    <img :src="imageUrl" alt="image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Str: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABAFJREFU ..........................DlzUWu+L9NALAI4D+JOIkszc5PuWNABcBbAbwGGt9ewmAFLKJ5n5s5iXEhZCvBQEgQ3YEdd1p4UQR9PpdH11dXWRmV8motPJZPJgIpH4bWVl5dDw8PAR3/ftE2B9BuzX6Ojo/kajYZvp/i5vhAYRXbBPs3YTdcuYlPIuZj7tOM4r2+n+vx6nPdR/x1T/Aau20TA//wiSAAAAAElFTkSuQmCC',
      imageUrl: ''
    }
  },
  mounted() {
    const blob = base64ToBlob(this.base64Str);
    this.imageUrl = URL.createObjectURL(blob);
  }
}
</script>