工作中碰到的问题，在处理接口返回的验证码图片时，由于返回的是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. Android 通用Dialog中设置RecyclerView

    通用Dialog public class IOSRecyclerViewDialog{ private Context context; private Dialog dialog; private ...

  2. android随手记

    Linearlayout: gravity:本元素中所有子元素的重力方向     layout_gravity:本元素对于父元素的重力方向 自定义权限:http://www.cnblogs.com/i ...

  3. ORACLE 11g 导出数据

    ORACLE 11g 导出 表的时候 不会导出空表 导出空表操作步骤 :(使用PLSQL) 1.打开SQL window 执行下面的 SQL Select 'alter table '||table_ ...

  4. Language Integrated Query

    Language Integrated Query (LINQ, pronounced "link") is a Microsoft .NET Framework componen ...

  5. Java泛型的一段代码

    package com.chase.test; import java.util.ArrayList; import java.util.Hashtable; import java.util.Lis ...

  6. Elasticsearch学习(一)————简单命令

    Elasticsearch一.简介**Elasticsearch 是一个分布式的搜索和分析引擎,可以用于全文检索.结构化检索和分析,并能将这三者结合起来.Elasticsearch 基于 Lucene ...

  7. struts2，hibernate等模板配置文件在jar包中的路径，以及所需要的包

    一.struts2 1.struts的配置模板文件struts-default.xml的位置: struts-2.3.16.1 --> src --core --> src --> ...

  8. 基于ALSA的WAV播放和录音程序

    http://blog.csdn.net/azloong/article/details/6140824 这段时间在探索ALSA架构,从ALSA Core到ALSA Lib,再到Android Aud ...

  9. Untiy中的数据平滑处理

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50680237 作者:car ...

  10. position:fixed div如何居中

    div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}