vue将base64转换为img图片
时间: 2023-10-28 07:32:32 浏览: 262
在Vue中,可以使用以下代码将base64字符串转换为img图片:
```html
<template>
<div>
<img :src="base64ToImgSrc(base64Str)" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
base64Str: 'data:image/png;base64,iVBORw0KG...'
}
},
methods: {
base64ToImgSrc(base64Str) {
return `data:image/png;base64,${base64Str}`;
}
}
}
</script>
```
其中,base64Str是base64字符串,base64ToImgSrc是一个方法,用于将base64字符串转换为img的src属性值。在模板中,使用:src绑定该方法的返回值即可。
相关问题
vue将base64转换为img图片路劲
在Vue中,可以使用以下代码将base64字符串转换为图片路径:
```html
<template>
<div>
<img :src="imgPath" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
imgPath: ''
}
},
mounted() {
this.base64ToImgPath('data:image/png;base64,iVBORw0KG...') // 传入base64字符串
},
methods: {
base64ToImgPath(base64Str) {
const blob = this.base64ToBlob(base64Str)
const url = URL.createObjectURL(blob)
this.imgPath = url
},
base64ToBlob(base64Str) {
const arr = base64Str.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
}
}
</script>
```
其中,base64Str是base64字符串,base64ToImgPath是一个方法,用于将base64字符串转换为图片路径。在mounted钩子函数中,调用该方法并传入base64字符串。该方法首先将base64字符串转换为Blob对象,然后通过URL.createObjectURL方法将Blob对象转换为图片路径,最后将图片路径赋值给img的src属性。
vue将base64编码转换为图片
要将base64编码转换为图片,可以使用Vue.js提供的<img>标签,将base64编码作为src属性的值,代码示例如下:
```html
<template>
<div>
<img :src="imageSrc" alt="image">
</div>
</template>
<script>
export default {
data() {
return {
base64Image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAgAElEQVR4Xu2dTZTcV7bHv17vZmW7t1F9t1d7sVmDySKgWqrE...(省略部分base64编码)"
}
},
computed: {
imageSrc() {
return this.base64Image;
}
}
}
</script>
```
其中,base64Image是一个包含图片base64编码的变量,imageSrc是一个计算属性,返回base64Image作为img标签的src属性值。这样,就可以在Vue.js中显示base64编码的图片了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)