vue前端展示base64编码后的照片

最新推荐文章于 2023-07-20 12:09:52 发布
最新推荐文章于 2023-07-20 12:09:52 发布
阅读量489 收藏 2
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650737/article/details/121020396
版权 
<div>
<img :src="aa"/>
<div>

this.$request({
   url:url,
   method:'get',
   params: {
      ...this.param
   }
}).then(res => {
this.aa = 'data:image/png;base64,'+返回的base64编码
])
这结局或许就完美在可悲
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue前端以base64的图片显示
qq_31741189的博客
01-08 6586
action属性值为"#" 增加了:http-request="httpRequest"方法 解释： http-request覆盖默认的上传行为，可以自定义上传的实现 <el-upload class="avatar-uploader" action="#" :http-request="httpRequest" :show-f...
VUE Base64编码图片展示与转换图片
qq_42506969的博客
06-23 1万+
VUE Base64编码图片展示与转换图片VUE Base64编码图片展示与转换图片VUE Base64编码图片展示Base64编码转换图片文件转换base64编码更便捷的图片转化Base64编码方式 VUE Base64编码图片展示与转换图片 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，使用 base64 传输图片文件可以节省一个 http 请求，图片的 base64 编码可以算是前端优化的一环 VUE Base64编码图片展示 <img :src="
vue 图片base64 显示
weixin_39888214的博客
05-14 163
<img v-if="companyDescribe.companyLogo" width="85" style="height: 85px; object-fit: contain" :src="'data:image/png;base64,' + companyDescribe.companyLogo" alt /> <img v-else width="85" src="../../assets/images/qiye_logo.jpg" alt="" />
vue中如何把网络上的图片通过base64显示出来
毅呀毅呀哟
04-26 4682
在这个示例中，组件在挂载时调用了fetchImage()函数来从“https://example.com/image.jpg”获取图像并将其转换为Base64字符串。一旦转换完成，组件会将Base64字符串储存在`imageData`变量中，并且在页面中显示图片。函数从网络上获取图像，并将其转换为Base64字符串以在页面上显示。在Vue中，您可以使用。
Vue + Element UI 实现上传图片转base64及base64图片预览
hequhecong10857的博客
08-28 1万+
目录功能概述实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览效果截图参考链接 功能概述 前端后台管理系统新增数据时，需要在上传图片后，将图片转成base64格式的字符串，最后将字符串传到后台数据库。 在编辑数据或者查看详情时，需要预览图片。 实现步骤 使用el-upload组件实现上传功能 通过getFile方法获取文件信息 定义getBase64方法将图片转为base64格式 预览和
vue项目base64字符串转图片的实现代码
10-18
在Vue项目中，将Base64字符串转换为图片是一种常见的需求，这通常涉及到前端与后端的数据交互。本文将详细讲解如何实现这一功能，并提供相关的Vue代码示例以及后端处理Base64字符串的方法。 首先，让我们从Vue组件...
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
10-18
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片较多，篇幅太长，就会比较烦恼，接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,...
Vue实现base64编码图片间的切换功能
12-13
前言 昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求，每张图片在鼠标移入时都要更换图片路径，展示一个新的图片，由于每张图片大小都在2~6kb之间，webpack中配置了图片在10kb以内自动转换base64，所有就有了本篇文章的分享。先给大家展示下最后要实现的效果 实现思路 给每个元素添加@mouserover事件和@mouseleave事件 绑定函数，传用于识别当前参数的标识 根据所传参数判断当前状态下应该显示什么图片 解析渲染 实现过程 从json文件中读取图片信息集合，循环渲染json文件中的图片，传当前元素和当前图片的一些信息过去 <div class="
前端 img图片如何 展示 base64 格式（并且下载到本地）
qq_42174597的博客
05-04 7946
img 如何 展示 base64格式图片，并且可以下载到本地。
Vue：base64 图片展示
Alice_Lee_Lee的博客
01-04 1583
base64 格式图片展示
Vue上传图片返回base64并在页面展示，并图片上canvas进行红框框选标记
最新发布
林中明月间丶
07-20 1032
结合以上，下面我贴一下项目图 要求大致是在图片是进行红框标记后端返回过来的位置，ai识别的数据。
vue如何显示base64图片
我的博客
09-20 7183
【代码】vue如何显示base64图片。
VUE 显示 base64格式图片
热门推荐
新起点的博客
06-04 1万+
<img src="'data:image/png;base64,'+userInfo.imgStr" alt="图片未上传" /> var vm = new Vue({ el:'#rrapp', data:{ title: null, userInfo: { imgStr:base64码 } } }); PS：注意src里面的单引号和双引号 data:, 文本数据 data:text/plain, 文本数据 data:text/html,HTML 代码 data:t
前端vue 上传base64图片组件带获取展示 功能
baidu_39157075的博客
10-14 699
npm找到的组件 带图片压缩 上传限制 数量限制等!!! 地址:https://www.npmjs.com/package/vue-upload-imgs 这个组件还有其他功能有需要的都可以自行研究. 实现思路是前端上传图片把图片前端处理转换成base64发送给后端,后端保存base64转换成图片保存到后端数据库,当需要展示或者修改时,把图片以base64传给前端,利用这个组件处理base64的性质,直接展示并增删图片. 图片修改部分!!!:我这边和后端商量的是前端先获取原始数据后端发现数据变化
base64方式显示控件
weixin_30297281的博客
07-16 276
data:,文本数据 data:text/plain,文本数据 data:text/html,HTML代码 data:text/html;base64,base64编码的HTML代码 data:text/css,CSS代码 data:text/css;base64,base64编码的CSS代码 ...
vue如何展示base64图片
monkey7
10-09 7408
<img :src=" 'data:image/png;base64,' + base64的地址 "> 将后台给返回的base64直接拼接的img的:src上 前面加固定的前缀 data:image/png;base64,
vue上传图片java后端转换成base64 代码示例
06-07
好的，下面是一个vue上传图片并且通过Java后端将图片转换成base64的代码示例： Vue前端部分： ``` <template> <div> <input type="file" @change="onFileChange"> </div> </template> <script> export default { methods: { onFileChange(event) { // 获取文件对象 const file = event.target.files[0] // 创建 FileReader 对象 const reader = new FileReader() // 读取文件 reader.readAsDataURL(file) // 文件读取完成后执行的回调函数 reader.onload = () => { // 获取 base64 编码的图片字符串 const base64Image = reader.result // 发送请求到后端 this.postImage(base64Image) } }, postImage(base64Image) { // 发送 Ajax 请求到后端 // 注意这里的 url 和请求方法要根据实际情况进行修改 axios.post('/api/uploadImage', { base64Image }).then(response => { console.log(response.data) }) } } } </script> ``` Java后端部分： ``` @RequestMapping(value = "/api/uploadImage", method = RequestMethod.POST) @ResponseBody public String uploadImage(@RequestBody Map<String, String> requestMap) { try { // 获取 base64 编码的图片字符串 String base64Image = requestMap.get("base64Image"); // 去掉字符串头部的 "data:image/png;base64," 部分 base64Image = base64Image.substring(base64Image.indexOf(",") + 1); // 解码 base64 编码的图片字符串 byte[] imageBytes = Base64.getDecoder().decode(base64Image); // 将图片字节流输出到文件 FileOutputStream imageOutFile = new FileOutputStream("image.jpg"); imageOutFile.write(imageBytes); imageOutFile.close(); // 将图片字节流转换成 base64 编码的字符串 String base64ImageString = Base64.getEncoder().encodeToString(imageBytes); return base64ImageString; } catch (IOException e) { e.printStackTrace(); return null; } } ``` 这段代码是一个简单的示例，具体实现还需要根据实际情况进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值