uniapp遇到后台返回base64码格式图片没有显示出来

最新推荐文章于 2024-05-08 18:46:04 发布
最新推荐文章于 2024-05-08 18:46:04 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： error 文章标签： uni-app java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53854631/article/details/120457684
版权

今天在做uni-app项目时，后台返回base64码，前端这边需要将base64码进行转化为图片

前端无法显示
在这里插入图片描述
但是控制台是有输出的
在这里插入图片描述
网上说因为后台返回的会有换行空格之类的，这样会导致图片显示不出来

在这里插入图片描述
把画出来的这句代码添加上就好了
在这里插入图片描述完美解决！希望能给遇到同样问题的你有所帮助

ciao-lk
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp 生成海报图片base64转换
04-16
uniapp 生成海报图片base64转换 （微信头像贴在海报上需要base64转换）import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}） .catch(error => { ...
uniapp 图片问题
weixin_43993613的博客
07-06 380
uniapp开发 图片问题
uniapp中预览base64图片
huang_jimei的博客
03-21 688
一、首先要安装插件image-tools，插件地址：https://ext.dcloud.net.cn/plugin?
uniapp中的image组件无法显示base64格式图片
最新发布
kaQin0的博客
05-08 219
如果base64格式过长的话可能出险换行符，只需要去除换行符就行。
做uni-app时，遇到后台返回base64码，将base64码转为图片，但是图片没有显示出来的解决方法
weixin_44237840的博客
09-28 8144
在做uni-app项目时，遇到一个问题时，后台返回一长串码，前端这边需要将base64码进行转化为图片，做法如下： 首先调接口获取到后台返回的base64码，如下图（记得调用这个方法哦） 获取到的base64码如下： 接下来呢在页面需要的地方给他进行赋值这里关键的一步来了,如下图： 在data中定义该变量，在这里记得要把画出来的这句代码添加上，因为后台返回的会有换行空格之类的，这样会导致图片显示不出来，在获取哪里赋值我加这个没起作用就加这里了，查了一下有的人写在调接口那块也可以，我自己试了不行就写这里
uniapp 获取后台传来的base64图片显示在页面上
这里是痞子Monkey的博客
10-13 1652
在图片的地址前面拼接 'data:image/png;base64,' <image :src="'data:image/png;base64,' + item.img" ></image>
uni.app base64数据展示图片
z980498059的博客
12-29 4846
1.‘data:image/png;base64,’ + 获取到的base64数据 this.imgUrl = 'data:image/png;base64,' + res.data.data.img 2.打印出的转换数据（this.imgUrl）放在浏览器上可以显示，目前此步渲染不到image标签上，这是因为base64字符串太长，在传输过程中加入回车导致 3.解决办法：.replace(/[\r\n]/g, "") ```javascript <image :src='imgUrl.rep
uni-app小程序生成base64二维码真机不显示问题解决
zhiyan1990的专栏
09-18 3293
现象： 小程序生成二维码后，使用canvas绘制到画板，开发工具可以显示，真机无法显示 原因： 生成二维码插件生成的图是base64格式的，而canvas不支持base64图片的 解决方案： 1、删除本地同名文件 2、将base64图片，存储到本地，生成临时url 3、将本地图片绘制到canvas 具体实现： 1、删除本地同名文件 removeSave(FILE_BASE_NAME = 'tmp_base64src', format = 'jpg') { return new Pro
Thymeleaf显示base64字符串为图片.docx
03-12
在网页中把Base64字符串显示为图片很容易，但是当前台使用Thymeleaf框架时，就得绕个小弯子，直接使用html框架中的方法不行，本文详解了用Thymeleaf显示Base64字符串为图片的方法，望对大家有所帮助。
java将图片转为base64返回给前端
08-25
Java 将图片转换为 Base64 返回给前端是指在 Java 服务器端将图片转换为 Base64 编码字符串，并将其返回给前端，以便在前端进行显示或处理。本文将详细介绍 Java 将图片转换为 Base64 返回给前端的实现过程，并提供...
python将图片转base64,实现前端显示
09-18
今天小编就为大家分享一篇python将图片转base64,实现前端显示，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp获取后台给的base64图片流显示到页面中
laihaodong的博客
06-11 2984
<image style="width: 506rpx;height: 506rpx;" :src='aaa'></image> 后台返回的base64流 直接复制出来放到src里面就可以出来,但是通过定义this 变量,在通过 :src 来赋值 就是不显示,后来发现,应该是通过this定义变量赋值的时候,没有去掉返回的数据的双引号,:src="xxx"的时候也有双引号,所以导致了他有四个引号,识别失败 解决办法就是去掉返回数据的双引号 使用正则去掉双引号 var reg =
UniAPP实现APP端截取页面生成Base64图片，并将Base64图片保存到相册
pengpm的博客
07-18 595
UniAPP实现APP端截取页面生成Base64图片，并将Base64图片保存到相册
使用uniapp在H5上base64在app上_doc/....解决如何上传图片
小黑的博客
03-05 3836
有的时候用canvas会遇到保存图片的时候是在h5上是base64而在手机上时的格式是这样：_doc/uniapp_temp_1614856467203/canvas/16148564699070.png 结局方法： //res=_doc/uniapp_temp_1614856467203/canvas/16148564699070.png /* *********************************************************** */ var p = plus.io.
uni-app小程序-将后台返回的base64码转为图片时，图片没有显示出来
weixin_48596030的博客
05-31 2507
在用uni-app开发小程序时，遇到一个问题：后台返回一长串码，前端这边需要将base64码进行转化为图片。这句代码添加上，因为后台返回的会有换行空格之类的，会导致图片显示不出来。2.1.获取后台返回的base64码。tips：在data中。
uniapp页面image图片加载base64失败
m0_60459392的博客
12-07 4699
uniapp页面image图片加载base64失败，不显示，空白情况解决方法如下：1.原因是base64太长有换行字符。2.过滤掉即可，加一个方法过滤3.点赞收藏做笔记
开发uni的H5项目记实--后端返回图片流（乱码）该怎么办
a1134503682的博客
05-16 1106
后端返回图片流（乱码）该怎么处理才能正常展示出来
uniapp显示base64格式的图片
04-04
要在Uniapp中显示base64格式的图片，可以使用uni-image组件。以下是一个示例代码： ```html <template> <view> <uni-image :src="imgUrl"></uni-image> </view> </template> <script> export default { data() { return { imgUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABVklEQVRIS+2UwQrAIAxF2z//6UuW6Qd5QbYC5cN3Jq9alEKW5Dl7n+5pGJnkslRnrRJdZ/Vf0/UeRbG0cX1RQ2OJt+3Eo3vz8Kk+o0P7O4JF4jv4Xg4ZlYSiG4J1CkSvQL8fzWItGJdAe0nJMcjKZj8XQ1Q2lEJ+D3tqLzjKzKY+M4Fm4v4K4jZ8Xz+TmL/HfJvKkAAAAASUVORK5CYII=' } } } </script> ``` 在上面的代码中，我们使用`uni-image`组件，并将base64格式的图片赋值给`src`属性。需要注意的是，`src`属性的值必须以`data:`开头，并且包含图片的格式和编码方式（在本例中，图片格式为png，编码方式为base64）。 运行该代码，即可在页面上显示出base64格式的图片。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值