vue后台返回base64图片无法显示的解决
更新时间：2022年06月14日 11:42:19 作者：Zxiuping
这篇文章主要介绍了vue后台返回base64图片无法显示的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue后台返回base64图片无法显示
关于后台接口返回的图片base64格式页面无法显示的问题，我遇到的原因是因为返回的一串内容里面存在空格或者换行的原因
解决方法如下
let str = `data:image/jpg;base64,${res.imgStr}`
this.mpId = str.replace(/[\r\n]/g, '')let str = `data:image/jpg;base64,${res.imgStr}`
this.mpId = str.replace(/[\r\n]/g, '')这样界面就能显示图片啦。
vue中base64转图片格式
// 拍照获取图片base64
// imgsrc: base64图片资源
refreshDataList (imgsrc) {
let data = this.baseImg(imgsrc)
console.log(data)
},
// base64转图片资源
baseImg (dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Web应用程序中剪贴板(Clipboard)操作是非常常见的操作之一,这篇文章主要给大家介绍了关于vue中粘贴板clipboard使用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue父子组建的简单通信之控制开关Switch的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
在日常使用Vue开发项目的时候，计算属性computed是一个非常常用的特性，本文就来分享一些使用Vue的computed计算属性时的一些小技巧，希望能够帮助到大家2023-06-06
这篇文章主要介绍了vue返回首页后如何清空路由问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在现代 Web 应用中,快速分享链接是一项常见需求,二维码作为一种简洁的分享方式,受到了广泛欢迎,所以本文将介绍如何使用 Vue 纯前端技术实现动态生成链接二维码的方法,需要的可以参考下2024-03-03
今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
elementui使用el-upload组件实现自定义上传的详细步骤
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下2023-12-12
我们在组件切换时经常会有传递一些数据的需求,这样就涉及到了路由传参的问题,下面这篇文章主要给大家介绍了关于vue-router传参的4种超详细方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue页面批量引入组件,本文结合示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
最新评论