vue中将图片的base64转换成图片展示
时间: 2024-03-21 17:36:41 浏览: 101
vue.js图片转Base64上传图片并预览的实现方法
在Vue中将图片的base64转换成图片展示可以通过以下步骤实现:
1. 首先,将base64字符串赋值给一个Vue组件的data属性,例如:
```javascript
data() {
return {
imageBase64: 'data:image/png;base64,iVBORw0KG...'
}
}
```
2. 在Vue模板中,使用`img`标签来展示图片,将`src`属性绑定到data属性中的base64字符串,例如:
```html
<template>
<div>
<img :src="imageBase64" alt="">
</div>
</template>
```
3. 如果需要将64字符串转换为文件对象,可以使用`fetch`函数将base64字符串转换为Blob对象,然后创建一个URL对象来展,例如:
```javascript
methods: {
convertBase64ToImage() {
fetch(this.imageBase64)
.then(res => res.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
// 使用url展示图片
});
}
}
```
这样就可以在Vue中将图片的base64字符串转换成图片展示了。
阅读全文