工作中碰到的问题，在处理接口返回的验证码图片时，由于返回的是encode编码代码，在js端获取到数据之后，通过函数encodeURI()来进行解码，之后可以通过在src中设置来实现图片显示： aaarticlea/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0..." alt="" />

<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端的更多相关文章

  1. php canvas 前端JS压缩，获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

  2. 用NOPI将图片二进制流导出到Excel

    这儿采取的是将图片的二进制流导出到Excel,直接上代码: /// <summary> /// DataTable导出到Excel的MemoryStream /// </summar ...

  3. C#MVC使用二进制流显示图片

    关于显示图片的最好方法当然是img 的src直接指向地址,简单实用.但是有时候也会使用到使用图片流显示图片的方法.实现也比较简单(在C# mvc中,java的不了解).具体如下: 1.前台cshtml ...

  4. GDI+ Image 读取内存二进制流显示图片

    int iBmpSize = cd.nTotleLen; HGLOBAL hMemBmp = GlobalAlloc(GMEM_FIXED, iBmpSize); IStream* pStmBmp = ...

  5. java处理金证中登查询图片二进制流问题

    package com.szkingdom.kess.model; import java.io.File; import java.io.FileOutputStream; import java. ...

  6. 前端Blob对二进制流数据的处理方式

    var xhr = new XMLHttpRequest(); xhr.open("post", "/login/getCaptcher?t=" + Math. ...

  7. 如何显示二进制流的图片（利用img控件）

    之前在http://www.cnblogs.com/JsonZhangAA/p/5568575.html博文中是利用的image控件来显示的二进制流图片,我现在想的是能 通过普通的<img id ...

  8. CEF 自定义用户协议(scheme)实现以二进制流的方式显示图片、视频、音频

    转载:https://www.cnblogs.com/sinceret/p/10417941.html 转载:https://stackoverflow.com/questions/48811756/ ...

  9. 接收二进制流（ArrayBuffer） ，并且显示二进制流图片

    1.调用接口,返回二进制流数据 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { && xhr ...

随机推荐

  1. javaweb 之 代理模式

    一.动态代理 1.1.代理模式 什么是代理模式及其作用 Proxy Pattern(即:代理模式),23种常用的面向对象软件的设计模式之一 代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问 ...

  2. hdu4081 Qin Shi Huang's National Road System 次小生成树

    先发发牢骚:图论500题上说这题是最小生成树+DFS,网上搜题解也有人这么做.但是其实就是次小生成树.次小生成树完全当模版题.其中有一个小细节没注意,导致我几个小时一直在找错.有了模版要会用模版,然后 ...

  3. map 和 for

    一.map 函数封装. ; [,,,,,,,].map(function(elem){ sum += elem; }) console.log('sum='+sum); 二.平时用for的写法. ,, ...

  4. 详解sqlserver查询表索引

    SELECT   索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ? 1 2 3 4 5 6 7 8 FROM  sysindexes  a ...

  5. STL：使用string、vector、complex和limits

    (有少量修改!)使用到了STL的算法库: #include<algorithm> #include<vector> //属于STL库 模板库 写库的人为了和标准C和C++库区分 ...

  6. 编译VTK的MFC库

    原文链接:http://blog.csdn.net/left_la/article/details/7069708 本人做了少量修改! Win7 + VS2010 + CMake2.8.6 + VTK ...

  7. 【技术累积】【点】【java】【4】日志级别

    闲聊 水文也是文,写总比不写好. 日志级别 虽然对其他语言的日志系统也不甚了解,但还是感觉Java的日志有些麻烦,当然也可以说是发展已久,多有变化,多有完善吧. 从日志级别来说,有从高到低的八个级别: ...

  8. 将数据库返回的ResultSett转换成List装Map形式的方法（ResultSetToList）

    多时候想做一些关于数据库实验,如果先搭建框架太麻烦,直接得到ResultSet处理起来取值什么的也很繁琐,为此我做了一个将ResultSet转换成List<Map<String,Objec ...

  9. form表单提交三种方式，demo实例详解

    第一种:使用type=submit  可以直接提交 <html> <head> <title>submit直接提交</title> </head& ...

  10. 洛谷 P2365 任务安排_代价提前计算 + 好题

    最开始,笔者将状态 fif_{i}fi​ 定义为1到i的最小花费 ,我们不难得到这样的一个状态转移方程,即 fi=(sumti−sumtj+S+Costj)∗(sumfi−sumfj)f_{i}=(s ...