vue后台返回base64图片无法显示的解决
作者:Zxiuping 时间:2024-05-09 15:21:11
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})
},
来源:https://blog.csdn.net/Zxiuping/article/details/122232664
标签:vue,base64,图片
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python数据可视化之Seaborn的使用详解
2022-10-25 21:57:31
![](https://img.aspxhome.com/file/2023/2/89292_0s.png)
Python 如何调试程序崩溃错误
2022-04-27 15:22:30
webpack5搭建一个简易的react脚手架项目实践
2024-04-18 10:02:37
![](https://img.aspxhome.com/file/2023/6/136136_0s.jpg)
Python使用monkey.patch_all()解决协程阻塞问题
2021-05-11 17:27:19
Flask web开发处理POST请求实现(登录案例)
2022-03-06 09:34:13
mysql下mysql-udf-http效率测试小记
2024-01-16 15:14:21
vue.js中使用echarts实现数据动态刷新功能
2024-04-22 12:53:19
![](https://img.aspxhome.com/file/2023/3/136013_0s.png)
服务器端jupyter notebook映射到本地浏览器的操作
2023-10-30 12:06:20
创建数据表/创建列的一些asp函数
2008-06-24 12:21:00
Pandas数据结构详细说明及如何创建Series,DataFrame对象方法
2021-03-14 12:13:35
![](https://img.aspxhome.com/file/2023/6/99666_0s.png)
Python采集二手车数据的超详细讲解
2022-09-23 00:58:22
![](https://img.aspxhome.com/file/2023/8/75078_0s.png)
mysql存数组的实例代码和方法
2024-01-23 22:45:21
Python 通过requests实现腾讯新闻抓取爬虫的方法
2022-03-19 17:17:02
![](https://img.aspxhome.com/file/2023/6/104866_0s.jpg)
python email smtplib模块发送邮件代码实例
2022-05-15 16:37:03
![](https://img.aspxhome.com/file/2023/5/133665_0s.jpg)
效控制C#中label输出文字的长度,自动换行
2023-07-22 04:02:49
pip安装路径修改的详细方法步骤
2021-11-03 12:38:29
![](https://img.aspxhome.com/file/2023/7/130567_0s.png)
go语言处理TCP拆包/粘包的具体实现
2023-08-25 12:19:00
python中列表添加的四种方法小结
2023-12-10 21:59:47
![](https://img.aspxhome.com/file/2023/7/71337_0s.png)
python3爬虫之入门基础和正则表达式
2023-04-11 12:48:02
![](https://img.aspxhome.com/file/2023/8/77568_0s.jpg)
Python-Selenium自动化爬虫
2021-04-04 10:55:39
![](https://img.aspxhome.com/file/2023/3/121013_0s.png)