工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是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. angular中的ng-click指令案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. mybatis 高级映射和spring整合之查询缓存(5)

    mybatis 高级映射和spring整合之查询缓存(5) 2.0 查询缓存 2.0.1 什么是查询缓存 mybatis提供缓存,用于减轻数据压力,提高数据库性能. mybatis提供一级缓存和二级缓 ...

  3. Sql Server 连接池

    在看缓存的一篇文章中,看到连接池的三个字,来充充电. 原文连接 这篇讲了关键字 其实我们一直在使用SqlServer的连接池.在连接字符串中,Pooling为是否启用连接池,默认值为true,表示启用 ...

  4. Oracle PL/SQL开发基础(第三十四弹:RAISE_APPLICATION_ERROR)

    RAISE_APPLICATION_ERROR在子程序内部使用时,能从存储子程序中抛出自定义的错误消息.这样就能将错误报告给应用程序而避免范围未捕获异常. 语法如下: RAISE_APPLICATIO ...

  5. Auto Layout压缩阻力及内容吸附讲解

    Auto Layout压缩阻力及内容吸附讲解 本文为投稿文章,作者:梁炜V 在Auto Layout的使用中,有两个很重要的布局概念:Content Compression Resistance 和  ...

  6. Java导出Excel文件的两种方法

    将数据以Excel表格的形式导出:首先下载poi的jar包,导入项目中,或者使用maven仓库管理,在pom文件添加:<dependency>    <groupId>org. ...

  7. js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得

    js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得

  8. P1085 不高兴的津津

    ... 题目描述 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一天上课超过八个小时就会不 ...

  9. TensorFlow 版本问题

    TensorFlow各个版本均可以在GitHub上下载,之前下载配置的是0.5.0版本,运行的时候,出现很多问题,什么模块缺失attribute,函数参数问题等,修改起来让人抓狂,后来索性下载使用0. ...

  10. hdu 1702 栈和队列的简单应用

    #include<stdio.h> #include<string.h> #include<queue> #include<stack> using n ...