vue怎么将base64转成图片
时间: 2023-10-11 22:21:23 浏览: 77
要将Base64转换为图片,可以使用JavaScript的Blob对象和URL.createObjectURL()方法。下面是一个使用Vue的例子:
```javascript
<template>
<div>
<img :src="imageSrc" />
</div>
</template>
<script>
export default {
data() {
return {
base64String: "data:image/png;base64,iVBORw0KGg...", // 这里是Base64字符串
imageSrc: "" // 图片src
};
},
mounted() {
this.convertToImage();
},
methods: {
convertToImage() {
const byteString = atob(this.base64String.split(",")[1]); // 将Base64转换为二进制数据
const mimeString = this.base64String.split(",")[0].split(":")[1].split(";")[0]; // 获取图片类型
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], { type: mimeString }); // 创建Blob对象
this.imageSrc = URL.createObjectURL(blob); // 使用URL.createObjectURL()方法生成图片src
}
}
};
</script>
```
在上面的示例中,我们首先将Base64字符串分割成数据类型和数据部分。然后使用`atob()`函数将Base64字符串转换为二进制数据。接下来创建一个Blob对象,将其传递给`URL.createObjectURL()`方法以生成图片的src。最后,将生成的src存储在Vue组件的data中,使用`<img>`标签显示图片。