工作中碰到的问题，在处理接口返回的验证码图片时，由于返回的是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. （转）redux

    随着 JavaScript 单页应用开发日趋复杂,越来越多的 state (状态)需要在前端进行管理. 这些 state 可能包括服务器响应.缓存数据.本地生成尚未持久化到服务器的数据,也包括 UI ...

  2. powershell遍历文件夹设置权限，解决文件无法删除的问题。

    function set-rights ($path) { $p = Get-Item $path; if ($p.Attributes -eq 'Directory') { foreach ($ch ...

  3. ubuntu下安装 nginx ＋ php ＋ memcached + mariadb

    一,apt-get 安装 1,安装nginx sudo apt-get install nginx 所有的配置文件都在/etc/nginx下,虚拟主机配置在/etc/nginx/sites-avail ...

  4. offset() 方法 文档偏移量

    以前看视频学习听到这个offset()感觉很陌生,没有用过,马上记到笔记里了,今天翻起笔记再次看到,都已经忘记是怎么用的了,所以来到这里狠狠的记下来: offset() 方法返回得或设置元素相对于文档 ...

  5. <td colspan="6"></td>代表这个td占6个td的位置

    <td colspan="6"><span class="order-time">2017-10-11 14:55:23</spa ...

  6. 使用***客户端和Privoxy让所有CentOS 7命令行工具通过代理访问互联网（转载）

    安装*** 首先安装pip: curl -LO "https://bootstrap.pypa.io/get-pip.py" python get-pip.py 通过pip安装** ...

  7. JS 封装一个求圆面积的函数 传值：半径

    y(6) var s = ""; function y (r){ s = Math.PI*r*r; alert(s); }

  8. Shader渲染动画

    一.概述 先看一下Shader类的介绍: /** * Shader is the based class for objects that return horizontal spans of col ...

  9. selenium的显示等待和隐式等待区别

    1.selenium的显示等待 原理:显式等待,就是明确的要等到某个元素的出现或者是某个元素的可点击等条件,等不到,就一直等,除非在规定的时间之内都没找到,那么就跳出Exception.(简而言之:就 ...

  10. webpack学习笔记(2)--webpack.config.js

    3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...