vue实现base64格式转换为图片

<template>
  <div>
    <img :src="imageSrc" alt="未获取到图片" />
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const base64Data = ref('把我换成base64数据！！！'); // 替换成你的base64图像数据
    const imageSrc = ref('');
    const convertBase64ToImage = () => {
      const img = new Image();
      img.src = base64Data.value;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
        const imageURL = canvas.toDataURL('image/png');
        imageSrc.value = imageURL;
      };
    };
    convertBase64ToImage();
    return {
      imageSrc
    };
  }
};
</script>

<script setup>
import { ref } from 'vue';
const base64Data = ref('data:image/png;base64,iVBORw0KG...'); // 替换成你的base64图像数据
const imageSrc = ref('');
const convertBase64ToImage = () => {
        const img = new Image();
        img.src = base64Data.value;
        img.onload = () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
        const imageURL = canvas.toDataURL('image/png');
        imageSrc.value = imageURL;
      };
    };
    convertBase64ToImage();
</script>