vue 中后台返回 base64图片无法显示

于 2021-12-30 11:35:05 发布
阅读量2.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zxiuping/article/details/122232664
版权

关于后台接口返回的图片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, '')

这样界面就能显示图片啦。如果能帮到你就点个赞吧~

Zxiuping
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
VUE中如何将后台接口获得的图片显示在页面上
Tonyhnv的博客
05-25 3759
从后台直接获取图片数据得到的是乱码，需要先转化成blob格式才可以 需要先在获取图片的接口js文件内配置请求类型为blob 再在请求函数体内将得到的数据转换成url 这样就能显示啦！
Vue项目，当接口图片无法显示，使用本地默认图片
无知者无畏
09-11 954
方法一：使用require方法 亲测没有效果（方法暂时保留） <img v-bind:src="userData.photo" :οnerrοr="logo" class="img-box4"> data: () => ({ logo: 'this.src="' + require('../assets/img.png') + '"' }) 参考链接：https://blog.csdn.net/qq_32786873/article/details/70161342 方
vue获取豆瓣图片资源，数据接口正常，图片无法显示，按右键能正常显示
weixin_39553363的博客
02-04 798
情景描述 在做项目的时候，配置了跨域代理，获取数据成功，但是在渲染图片数据的时候却不能正常显示图片 但是当我们选中某张图片按下右键，选择在新窗口打开的时候的时候，图片却能正常显示 解决方法 这时候，我们只需要在public文件夹下的index.html文件头部添加上这样一句代码,问题就可以完美解决啦~ <meta name="referrer" content="never"> ...
vue请求网络接口中图片无法显示报错403解决办法
qq_42780155的博客
12-30 2760
自己写的小demo，使用mock数据，发现登录图片请求403，获取不到 解决方法如下 方法一： 在模拟数据avatar图像的前面加上 ’https://images.weserv.nl/?url=’+'你的图片路径地址’ 再次登录就有图像了 如果是请求后台接口无法获取图像的话 方法二： getImages( _url ){ if( _url !== undefined ){ ...
vue 上传图片 base64图片无法显示的问题
TO_Web的博客
01-13 4475
后台返回的base64无法显示的原因 原因一： 返回的base64中存在换行和空格， 这样前端直接渲染的话就显示不出来 解决办法： let strss = `data:image/jpg;base64,${res.data}`; let image1path = strss.replace(/[\r\n]/g,"") ${res.data} 这个是返回的base64编码 ...
做uni-app时，遇到后台返回base64码，将base64码转为图片，但是图片没有显示出来的解决方法
weixin_44237840的博客
09-28 8015
在做uni-app项目时，遇到一个问题时，后台返回一长串码，前端这边需要将base64码进行转化为图片，做法如下： 首先调接口获取到后台返回的base64码，如下图（记得调用这个方法哦） 获取到的base64码如下： 接下来呢在页面需要的地方给他进行赋值这里关键的一步来了,如下图： 在data中定义该变量，在这里记得要把画出来的这句代码添加上，因为后台返回的会有换行空格之类的，这样会导致图片显示不出来，在获取哪里赋值我加这个没起作用就加这里了，查了一下有的人写在调接口那块也可以，我自己试了不行就写这里
后台返回的base64格式的图片无法渲染到页面上
热门推荐
qq_35430000的博客
12-06 1万+
最近开发一个项目，需要后台返回一个二维码，所以后台返回给我一串base64格式的字符串。本以为直接img标签渲染即可，但死活不出来，以为我的方法有问题，一直在查找。后来发现是后台返回的base64图片格式的字符串 带有换行和空格，写了一个方法去掉换行和空格，图片立马渲染成功（吐槽一下。。） getQRcode () { let _this = this ...
图片无法显示 base64图片无法显示 图片体积过大无法显示
shalDream的博客
06-06 5998
图片体积过大 在vue项目中，经常使用webpack或其他打包工具，但因打包工具对图片的引入经常有大小限制，所以导致图片无法加载，一般来说，图片超过20kb就容易无法显示，此时应使用require引入方法显示图片 如果是背景图图片，可以直接使用style添加背景图片实现 <div class="nav" :style="'background-image: url(' + bgl + ');'"> </div> export default { data() { retu
ie8 base64图片不显示_网页不显示图片怎么解决 网页图片显示不出怎么办
weixin_35948011的博客
01-20 1548
网页图片显示不出怎么办？在上网过程中，有时间会发现网页图片加载不出来，是网络慢的问题吗？还是电脑故障，今天跟大家分享下我日常解决上述问题的经验，希望能帮到有需要的童靴们哦。先确定网页是不是设置了不显示图片，我们点击浏览器右上角的“工具”-“Internet 选项”!然后切换到“高级”，往下拖到多媒体里面就有一个显示图片的选项，这前面需要划勾。检测一下flash player版本是不是最新的。检测方...
vue.js图片转Base64上传图片并预览的实现方法
12-11
对于前端人员来说，图片处理...针对这种问题，这里我推荐使用图片转base64格式，再发给后端，后端只需将转码结果存入数据库即可，前端调用接口直接获取到base64数据直接写入img src 标签即可 下面使用element ui upload
vue解析后端返回的二维码图片数据流
01-07
Chrome浏览器的preview中可以看到二维码（图片），如下： 解析思路： 尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片数据流 const blob = new Blob([QRCode]) const ...
使用Vue实现图片上传的三种方式
12-07
项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。 没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景...
Thinkphp5+element+vue开发的后台管理系统
12-19
2.1 vuex、路由、接口、[echarts](http://echarts.baidu.com/)、图片上传（头像上传返回上传路径，多图上传返回上传路径、上传头像图片为base64、上传的多图为base64）、字体图标库[fontawesome]...
在Vue中用canvas实现二维码和图片合成海报的方法
01-19
一般来说海报背景都是固定的，可以直接放在public文件夹，二维码可根据后台返回数据，也可用canvas生成，在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg ...
基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程 .rar
最新发布
05-02
基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程。.rar
基于matlab的关于生猪养殖场经营管理的研究.docx
05-02
本文档是课题研究的研究报告内含调研以及源码设计以及结果分析
网络作为特征提取器-python源码.zip
05-02
网络作为特征提取器-python源码.zip
JavaScript-javaweb项目
05-02
JavaScript-javaweb项目
vue怎么从后台拿图片显示在前端
06-09
要从后台获取图片并在前端显示，可以使用Vue.js提供的`<img>`标签，将后台返回的图片数据作为`src`属性的值即可。 首先，从后台获取图片数据，可以使用Vue.js的`axios`库发送HTTP请求。假设后台返回的图片数据是一个URL链接，可以使用下面的代码获取数据并将其渲染到页面上： ```html <template> <div> <img :src="imageUrl" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { imageUrl: '' } }, mounted() { axios.get('/api/getImage') .then(response => { this.imageUrl = response.data; // 假设后台返回的是图片链接 }) .catch(error => { console.log(error); }); } } </script> ``` 在上述代码中，使用了Vue.js的模板语法，动态绑定了`<img>`标签的`src`属性到`imageUrl`变量。在`mounted()`生命周期钩子中，使用`axios`发送请求获取图片数据，并将其赋值给`imageUrl`变量。当数据获取成功后，Vue.js会自动重新渲染页面，将图片显示在页面上。 需要注意的是，如果后台返回的是图片二进制数据，而不是链接，可以将其转换为Base64编码的字符串，然后将其作为`src`属性的值，如下所示： ```html <template> <div> <img :src="imageUrl" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { imageUrl: '' } }, mounted() { axios.get('/api/getImage', { responseType: 'arraybuffer' }) .then(response => { const base64 = btoa( new Uint8Array(response.data) .reduce((data, byte) => data + String.fromCharCode(byte), '') ); this.imageUrl = `data:image/jpeg;base64,${base64}`; }) .catch(error => { console.log(error); }); } } </script> ``` 在上述代码中，使用了`axios`库的`responseType`选项，将响应数据类型设置为`arraybuffer`，然后将二进制数据转换为Base64编码的字符串，最后将其作为`src`属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值