vue实现base64格式转换为图片

找了很多，但是都不太好用，打算自己总结一个保姆级教学，无需动脑，电脑有电就能实现

在HTML部分，我们需要一个标签来放置图片

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

其次，我们需要引入ref

<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那更简单，HTML的部分不变（保姆级教学教到底）

<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>