码迷,mamicode.com
首页 > Web开发 > 详细

前端将图片二进制流显示在html端

时间:2018-06-23 17:15:39      阅读:662      评论:0      收藏:0      [点我收藏+]

标签:gone   图片显示   出图   前端   通过   base   直接   验证   ima   

工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: 技术分享图片

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0...">

 

实现方法: 在src前添加data:image/jpeg;base64,+已经encode的二进制代码,就可以在网页端显示出图片,效果如图: 不过这么长串的二进制字符直接展示在html里实在不是上上之选,希望有条件的话可以让后台进行转码,直接获取src地址才是相对友好的方法。

前端将图片二进制流显示在html端

标签:gone   图片显示   出图   前端   通过   base   直接   验证   ima   

原文地址:https://www.cnblogs.com/shuai7boy/p/9217317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!