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})
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue中table表头单元格合并(附单行、多级表头代码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
vue项目页面的打印和下载PDF加loading效果的实现(加水印)
这篇文章主要介绍了vue项目页面的打印和下载PDF加loading效果的实现(加水印)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示
本文主要介绍了Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
由于vue是一个双向数据绑定的框架,它的点击事件与以前常用的还是有很大的差别的,下面这篇文章主要给大家介绍了关于VUE3基础学习之click事件的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vue3如何清空Reactive定义的数组问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了Vue如何使用第三方库file-saver和html-docx-js实现导出word文档的效果,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了提高vue.js中大型数据的性能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
Vue项目el-upload 上传文件及回显照片和下载文件功能实现
本次需求是上传多种固定格式的文件,且回显的时候,图片可以正常显示,文件可以进行下载,主要采用element的el-upload组件实现,对Vue项目el-upload 上传文件及回显照片和下载文件功能实现感兴趣的朋友跟随小编一起看看吧2023-12-12
最新评论