vue 上传图片 base64图片无法显示的问题

最新推荐文章于 2024-10-10 11:12:49 发布
原创 最新推荐文章于 2024-10-10 11:12:49 发布 · 5.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js

博客主要探讨后台返回的base64无法显示的问题，指出原因之一是返回的base64中存在换行和空格，导致前端直接渲染无法显示，还提及了返回的base64编码为${res.data}。
部署运行你感兴趣的模型镜像

后台返回的base64无法显示的原因

原因一： 返回的base64中存在换行和空格， 这样前端直接渲染的话就显示不出来
解决办法：

后台返回的base64无法显示

let strss = `data:image/jpg;base64,${res.data}`;
let image1path = strss.replace(/[\r\n]/g,"")

${res.data} 这个是返回的base64编码

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

vue项目base64字符串转图片的实现代码
10-18
在Vue项目中，将Base64字符串转换为图片是一种常见的需求，这通常涉及到前端与后端的数据交互。本文将详细讲解如何实现这一功能，并提供相关的Vue代码示例以及后端处理Base64字符串的方法。 首先，让我们从Vue组件...
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
12-10
通过这种方式，我们有效地解决了vue-quill-editor由于使用base64编码导致的字符长度过长问题，同时也确保了图片的正确显示。这种方法在处理大量或大尺寸图片时特别有用，因为它减少了富文本内容的大小，优化了网络...
图片无法显示 base64图片无法显示 图片体积过大无法显示
shalDream的博客
06-06 9950
图片体积过大 在vue项目中，经常使用webpack或其他打包工具，但因打包工具对图片的引入经常有大小限制，所以导致图片无法加载，一般来说，图片超过20kb就容易无法显示，此时应使用require引入方法显示图片 如果是背景图图片，可以直接使用style添加背景图片实现 <div class="nav" :style="'background-image: url(' + bgl + ');'"> </div> export default { data() { retu
vue如何显示base64图片
我的博客
09-20 7885
【代码】vue如何显示base64图片。
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
vue 中后台返回 base64图片无法显示
Zxiuping的博客
12-30 3514
关于后台接口返回的图片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图片不显示_Vue实战080：SVG图标不显示异常记录
weixin_39802055的博客
12-09 1763
今天在vue中配置处理svg文件时遇到图标显示不出来，查看开发者工具也没有提示异常和错误。不过查看Element元素的时候可以看到svg标签中出现了#shadow-root (closed)，shadow-dom 是浏览器提供的功能，它允许在浏览器渲染文档(document)的时候向Dom结构中插入子DOM元素，但是这个子DOM元素(shadow-dom)并不在主DOM 树中，所以该子DOM元素无...
vue.js图片转Base64上传图片并预览的实现方法
10-18
本文主要介绍了在Vue.js框架中实现图片转Base64编码后上传，并在前端进行预览的方法。在当前的前后端分离开发模式下，前端开发人员往往需要处理各种前端资源，包括图片。在传统做法中，通常会通过Ajax调用接口，以...
VueQuillEditor富文本上传图片(非base64)
11-20
上传图片也有几种方式，比如直接使用file控件上传到指定地址，又或者是借助封装好的上传按钮上传图片，如果是base64传到后台，还需要转回图片原格式加以保存，如果是二进制图片流则直接传到服务器即可。 我使用的是...
使用Vue实现图片上传的三种方式
12-07
在Vue.js中实现图片上传是常见的前端功能，通常有多种方式可以实现这一需求。下面将详细介绍3种不同的图片上传方式。 1. **云储存服务**： - **七牛云** 和 **阿里云OSS（Object Storage Service）** 是常用的云...
vue base64图片不显示_技巧 | word中插入的图片显示不完整怎么办？
weixin_39942451的博客
12-12 725
已经好久没有更新了，都快忘记有这个公众号存在了~这几个月发生了很多事情，工作上的任务也迟迟没有减轻，之前保持的日记也已经很久没有写了。但是觉得要是没有什么用什么方式将脑袋中时不时飘过的念头记录下来的话，过段时间就会完全想不起来了，再遇到同样的情境可能完全忘记自己曾经遇到过，所以我还是决定在此将一些技巧记录下来。好，开始~日常跟word文档打交道的小伙伴，一定会遇到各种各样让人头疼的各种问...
解决base64图片返回路径正确但是无法显示
最新发布
2301_76742166的博客
10-10 2123
解决base64图片返回路径正确但是无法显示
vue中base64图片展示提示 图片报错：GET data:image/png；base64,undefined net::ERR_INVALID_URL
weixin_51747462的博客
08-26 9781
图片报错：GET data:image/png;base64,undefined net::ERR_INVALID_URL
微信小程序不显示base64位图片
qq_48354174的博客
01-29 3030
我是用uniapp开发，一开始在微信小程序无法显示base64 图片 但是在开发者工具上可以 如果是存在自动换行的话可以使用 xxx.replace(/[\r\n]/g,""); 来解决 这个方法对我来说没有效果，于是我又找到另一种方法 使用 wx.getFileSystemManager() 来获取到全局唯一的文件系统管理器 具体可以看 官方链接 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-syste
获取到的base64图片不显示并且控制台报错Request Header Fields Too Large & base64图片转file
Anyuegogogo的博客
03-16 1102
获取到的base64图片不显示并且控制台报错Request Header Fields Too Large & base64图片转file
vue axios上传base64文件数据，后台无法获取获取到数据
u013780740的专栏
12-09 2178
1.html标签 accept设置为"image/png,image/gif,image/jpeg"，以接受图片文件 <input class="upload-file" @change="handleUpload($event)" type="file" id="imgUploader" accept="image/png,image/gif,image/jpeg"> 2.完整代码...
后端生成的base64图片，在前端偶尔无法显示
....
04-18 1万+
昨天遇到个生成印章的问题，由后端绘制好印章，转换成图片base64图片数据;由前端将返回的图片的base64数据加载显示，偶尔会导致页面的<img src=""data:image/png;base64,base64str"/>标签无法正常显示；原以为是后端生成的base64图片数据的问题，但是将生成的图片的base64字符串，直接拷贝到浏览器 或 用一个 只带有img 图片的标...
background图片不显示_vue组件内部动态渲染src，图片不显示的解决办法
weixin_39562185的博客
11-25 752
最近再做一个图片展示组件时候，发现在vue组件内部动态宣传src尽然图片显示不出来，百度一下，有很多解决办法，什么通过require加载呀，转为base64什么的，在我看来，统统都是很烂的解决办法，图片动态渲染不出来，那么我们就预先加载不就可以了吗？上代码：template:'',data: function () { return { fileList: [{...
BASE64解码后的图片显示不完整问题
热门推荐
u013917701的博客
06-15 3万+
BASE64解码后的图片显示不完整从前端获取base64信息就后用以下代码进行处理，发现解析出来的图片会损坏。StringBuffer filePathStr=new StringBuffer(); for(int i=0;i&lt;fileList.size();i++){ JSONObject fileObj = fileList.getJSONObject(i); if...
vue显示base64图片
01-12
在Vue中显示Base64图片可以通过使用`<img>`标签和绑定属性来实现。你可以将Base64字符串作为`src`属性的一部分，并将其绑定到Vue实例的数据属性上。 以下是一个示例代码： ```html <div id="app"> <img :src="'data:image/png;base64,' + imageData" alt="图片未上传"> </div> <script> var app = new Vue({ el: '#app', data: { imageData: 'base64码' } }); </script> ``` 在上面的代码中，我们使用了Vue的数据绑定语法`:`来绑定`src`属性。通过将Base64字符串与`data:image/png;base64,`拼接在一起，我们可以将Base64图片显示在页面上。 请注意，你需要将`imageData`替换为你实际的Base64字符串。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值