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>