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

TO_WebNow TO_WebNow 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 5.4k累计阅读 5.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄8年
关注
原创 最新推荐文章于 2026-06-10 09:36:42 发布 5.4k 阅读 AI 写同款· GEO 优化 ›
vue上传图片（压缩、base64） vue上传图片（压缩、base64） <el-form-item label="产品图标："> <span v-if="firImg" class="spanImg"> <img v-if="firImg" :src="firImg" alt="" class="avatar limImg"> <input... 阅读详情

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

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

后台返回的base64无法显示

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

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

收录于
Vue

当前文章被收录于：

Vue
45 篇文章 0 人学习

vue常见问题

订阅专栏 查看详情
标签
#javascript #vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
vuejs组件分享H5图片上传、压缩,拍照旋转 处理问题 　　这里用h5做图片上传考虑到浏览器支持的问题，这里考虑的场景是在做webapp的时候 　　1.移动web图片上传还包括拍摄上传，但是在移动端会出现拍摄的照片会旋转，处理这个问题需要得到图片旋转的情况，可以用exif.js来获取，具体可以参看文档 　　2.图片压缩 　　3.旋转 一、代码 1组件代码 template> div> 阅读详情

相关推荐

硬件测试入门--环路响应(Bode)测试

环路分析的一个重要作用就是分析开关电源的稳定性。扫频测试原理主要是给开关电源电路注入一个频率变化的正弦信号，测量开关电源在频域上的特性，通过分析穿越频率、增益裕度和相位裕度来判断环路是否稳定，可以为电子工程师设计稳定的控制电路提供直观的数据。开关电源的稳定性关系到整个应用系统的可靠性，利用伯德图可以看出在不同频率下系统增益的大小和相位。通过伯德图来对开关电源的环路稳定性进行判断和分析已经成为评估开关电源可靠性必不可少的方法。

songninging的博客 1万+

background图片不显示_vue组件内部动态渲染src，图片不显示的解决办法

最近再做一个图片展示组件时候，发现在vue组件内部动态宣传src尽然图片显示不出来，百度一下，有很多解决办法，什么通过require加载呀，转为base64什么的，在我看来，统统都是很烂的解决办法，图片动态渲染不出来，那么我们就预先加载不就可以了吗？上代码：template:'',data: function () { return { fileList: [{...

weixin_39562185的博客 770

手把手教你用STM32F429+FreeRTOS搭建开源SIP电话（附代码与避坑指南）

本文详细介绍了如何使用STM32F429和FreeRTOS搭建开源SIP电话系统，涵盖硬件选型、FreeRTOS任务划分、PJSIP协议栈移植、音频系统优化及安全实践。通过实战案例和代码示例，帮助开发者快速实现嵌入式VoIP通信，特别适合物联网和音视频通信领域的应用开发。

weixin_33582311的博客 356

vue中base64加密以及base64在ie浏览器中导致页面空白的问题

vue中base64加密以及base64在ie中导致页面空白问题

only_zing的博客 673

REST-meta-MDD Data总结

sMRI数据使用：nwc1、nwc2、nwc3（同样数据集相关论坛中有相关信息指向需要使用wc1、wc2、wc3）多方咨询与讨论后决定使用nwc数据，这里说明wc数据相对wc数据要大的多如wc1的大小为1.33GB，而nwc1的数据却有6.90GB。VBM文件：/REST-meta-MDD/Sharing/REST-meta-MDD-VBM- phase1 -Sharing.tar.gz。1、Excel中的表型信息：1-男，2-女；-9999或空白表示缺少数据。

2404_88295660的博客 1539

QMI8658A和QMC5883L传感器校准全攻略：从零偏校准到椭球拟合

本文详细解析了QMI8658A和QMC5883L传感器的校准方法，从零偏校准到椭球拟合，涵盖了9轴运动传感器的核心误差来源及补偿技术。通过实战案例和数学建模，帮助开发者提升传感器精度，适用于无人机、AR/VR等智能硬件应用。

weixin_29189381的博客 158

vue如何显示base64图片

【代码】vue如何显示base64图片。

我的博客 7939

H无穷控制学习笔记——加权灵敏度H无穷控制问题

一、加权灵敏度H无穷问题 系统结构如上图所示。被控对象P的状态空间方程为(Ap,Bp,Cp,DpA_p,B_p,C_p,D_pAp​,Bp​,Cp​,Dp​)，加权函数W1的状态空间方程为(A1,B1,C1,D1A_1,B_1,C_1,D_1A1​,B1​,C1​,D1​)，加权函数W2的状态空间方程为(A2,B2,C2,D2A_2,B_2,C_2,D_2A2​,B2​,C2​,D2​)，加权函数W3的状态空间方程为(A3,B3,C3,D3A_3,B_3,C_3,D_3A3​,B3​,C3​,D3​)。

一饮丶一啄的博客 4350

vue3项目本地src图片渲染不显示问题

解决vue3+vite项目中图片不显示问题

weixin_58149434的博客 2484

实战指南 | Adjust 与 Facebook、Google Ads 自归因配置全流程解析

本文详细解析了Adjust与Facebook、Google Ads自归因配置的全流程，帮助移动应用出海推广者解决广告归因难题。通过自归因功能（SAN），开发者可以获取更准确的数据、简化配置流程并扩大安装来源覆盖，显著提升广告效果监测和ROI计算效率。

weixin_42528780的博客 539

PCL 欧式聚类分割【2026最新版】

PCL中欧式聚类提取算法原理详解、代码实现以及一个大自然场景地物分割提取并保存分割结果到本地文件夹的应用案例。

点云侠的博客 40万+

vue 获取服务端base64位图片之后的处理

`

每天都要努力学习哦~~ 3501

使用 Python 调用 GitHub REST API 爬取 GitHub 仓库信息（完整指南）

GitHub 提供了功能强大的 REST API，允许开发者通过编程方式访问 GitHub 上的仓库、用户、提交记录、PR（Pull Request）等信息。GitHub REST API 是 GitHub 官方提供的 API 接口，支持通过 HTTP 请求来操作 GitHub 上的资源。在本文中，我们将使用 Python 编写一个完整的爬虫程序，调用 GitHub 的 REST API 来爬取 GitHub 仓库的信息。目前 GitHub 使用的主要是 v3 版本的 REST API。

2201_76125261的博客 1111

微信网页vue-cropper剪裁图片及其Android 端无法显示问题

1. 问题描述 Vue 框架的微信网页，需要在微信体系下剪裁图片，使用[vue-cropper](https://github.com/xyxiao001/vue-cropper)来实现，

心花怒放开到荼蘼 1484

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

Vue + Element UI 实现上传图片转base64及base64图片预览

目录功能概述实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览效果截图参考链接 功能概述 前端后台管理系统新增数据时，需要在上传图片后，将图片转成base64格式的字符串，最后将字符串传到后台数据库。 在编辑数据或者查看详情时，需要预览图片。 实现步骤 使用el-upload组件实现上传功能 通过getFile方法获取文件信息 定义getBase64方法将图片转为base64格式 预览和

hequhecong10857的博客 1万+

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

Vue+Base64实现图片上传

Vue+Base64实现图片上传base64介绍使用样例 base64介绍 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。通俗点来讲，它可以将不算大的文件或图片转为字符，这样就可以将文件或图片存到数据库中了。 使用样例 要做一个如下图的项目，使页面具有上传图片，预览图片的功能 vue代码: &lt;input ...

FelixHsp的博客 7507

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过，这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹

整体思路：vant插件默认的图片从前端上传到后端，是以 base64 码的形式传输的，而 base64 码很长很长，有几千个字符，存入数据库会占用空间，每次读取都传输 base64 的话也很消耗带宽和流量，所以后端接收以后要转化 base64 为图片存到硬盘或服务器，而数据库只保存图片的物理地址的路径，例如 F:/img/aa.png。

泡泡的博客 1万+

vue 图片Base64压缩上传

最近做的一个vue项目，后台要求请求头是application/json格式的，所以我对axios 进行了全局设置了请求头；但是正常上传图片都是application/x-www-form-urlencoded;charset=UTF-8格式的，这样突然出现的from请求就很是尴尬； 对此和后台商量把图片转换成Base64在传过去 let _this = this; // console.l...

猿小龙 4225

vue 图片压缩 转 base64 上传图片

因业务需求，公司项目需要用到 图片上传，压缩，转 base64，而这些都是在前台实现的。我只前也没在 vue 里写过这种逻辑和代码，在我的耐心钻研下，终于交付了代码和功能。 现在想把代码发不出来，分享给大家!!! 前端页面 一丶template <template> <div class="identityID"> <x-header :left-op...

CrazyNing 5537

Vue+VantUI项目Uploader 组件中上传base64码图片遇到的问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录图片上传处理base64转换后端返回数据后回填显示图片前言一、图片base64是什么？图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。二、图片上传处理1.图片大小限制2.图片压缩上传（简单处理）3.base64转换图片4.后端返回数据后回填显示图片总结参考文章 图片上传处理 base64转换 后端返回数据后回填显示图片 前言 由于公司要做一个访客预约的H5移动端的小项目，我选择用

weixin_45692478的博客 2552

关于base64上传图片问题

最近正在写接口————关于图片上传 前台使用Vuejs,采用base64上传图片，fileData:"data:image/jpeg;base64,9j/4AAQSk................."把这个data直接放在地址栏，也能显示图片，但是到后台用base64解码完生成新的图片后，打开新图片，竟然打不开，后来发现fileData中data:image/jpeg;base64,是标识符，

zhangjianxp01的博客 4149

vue中使用base64编码上传文件或者图片,以及base64编码的图片在img标签中使用

在我们开发的过程中,总会遇到上传的问题,如果不使用文件服务器的话,那么就需要我们对文件进行编码,然后发送给后台. 当然,后台也会给我们传送base64编码的文件或者是图片.最近的项目中就用到了base64编码,也是第一次写, 做为经验分享给你们. 那下面我们就来说一下base64编码在vue项目中的使用吧 html代码,此处用的是element-ui中的上传组件: ...

rolinabc的博客 2160

Vue实现图片转Base64上传案例

图片转Base64上传案例一、前端图片转Base64二、后台Base64转图片三、前端Base64转图片 一、前端图片转Base64 获取图片，将图片转为Base64字符串，AJAX提交到后台进行处理，前端使用了Vue基础。 在这里插入代码片 二、后台Base64转图片 后台获取前端Base64字符串，这里在后台转换为图片，存放到指定目录，并将新定义的图片名保存至数据库 在这里插入代码片 三、前端Base64转图片 如果选择第二步在后台直接存储Base64字符串到数据库，则可以在前端把Base64转为图

Cqi的博客 1817

在Vue中如何实现上传图片并转Base64格式

项目中提出一个需求。前端在实现表单上传图片时，需要将base64图片直接保存在表单中再进行提交...

Yu的博客 3063

[JavaScript]将图片base64去头部上传后端，前端 img直接显示base64图片

与Vue结合，使用weui 的上传图片 1.引入css <link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css"> <link rel="stylesheet" type="text/css" href="../css/weui.min.css"> 2.获取图片base64去头部，...

iChangebaobao的博客 6945

vue 图片上传base64

未添加图片时样式图如下 添加图片后，多了编辑和查看的按钮 html代码中分两个部分：无图片（如图1）/原本存在图片（图2）。根据绑定的firImg判断是否有图片 <el-form-item label="产品图标："> <span v-if="firImg" class="spanImg"> <img v-if="firImg...

Gomeer的博客 1322
上一篇： css 超过多行显示省略号,隐藏
下一篇： js 获取url地址栏后面的参数
点赞 1
评论 0
书签 书签 6
TO_WebNow
TO_WebNow
博客等级 码龄8年 23粉丝 160原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值