vue将base64转图片
时间: 2023-12-01 10:42:36 浏览: 42
以下是在Vue项目中将base64字符串转换为图片的方法:
```javascript
// 定义一个方法,将base64字符串转换为图片
function base64ToImage(base64Str) {
// 将base64字符串转换为Blob对象
let arr = base64Str.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob = new Blob([u8arr], { type: mime });
// 将Blob对象转换为图片URL
let url = URL.createObjectURL(blob);
return url;
}
// 在Vue组件中使用该方法
<template>
<div>
<img :src="imageUrl" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
base64Str: '这里是base64字符串',
imageUrl: ''
}
},
mounted() {
this.imageUrl = base64ToImage(this.base64Str);
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)