日常显示图片都诸如这种形式:直接使用img的src属性

<img src="图片路径、地址" alt="" />

以上方法无法在获取图片请求中设置请求头(headers)中字段

方法二:

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
console.log(this);
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
}
xmlhttp.send();
默认情况下,在发送XHR请求(request)的同时,还会发送下列头部信息:
Accept:浏览器能够显示的字符集。
Accept-Charset:浏览器能够显示的字符集。
Accept-Encoding:浏览器能够处理的压缩编码。
Accept-Language:浏览器当前设置的语言。
Connection: 浏览器与服务器之间的连接类型。
Cookie:当前页面设置的任何cookie
Host:发出请求的页面所在域。
Referer:发出请求的页面的URL.(该单词正确拼法是referrer)
User-Agent:浏览器的用户代理字符串。

jquery优化版:

function imgFun (url, auth, img) {
var windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.setRequestHeader("Authorization", 'Bearer ' + auth.token);
xhr.onload = function () {
console.log(this);
if (this.status == 200) {
var blob = this.response;
$(img).load(function (e) {
windowUrl.revokeObjectURL(img.src);
}).attr("src", windowUrl.createObjectURL(blob));
}
}
xhr.send();
} imgFun("/common/download/rgPhoto/" + d.result, auth, $("#rgPhotoImg");

参考:

1.ajax请求二进制流图片并渲染到html中img标签

2.XML DOM - XMLHttpRequest 对象

ajax请求二进制流图片并渲染到html中img标签的更多相关文章

  1. ajax 请求二进制流 图片

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  2. Ajax请求二进制流并在页面展示

    后端代码: public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, ...

  3. AJAX请求 $.ajaxSetup方法的使用:设置AJAX请求的默认参数选项,当程序中需要发起多个AJAX请求时,则不用再为每一个请求配置请求的参数

    定义和用法ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 ...

  4. ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

    写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...

  5. 第六章 MVC之 FileResult和JS请求二进制流文件

    一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...

  6. ajax 请求 后台返回的文件流

    download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...

  7. Bootstrap_Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

  8. ajax请求参数为中文乱码的情况

    解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...

  9. JQuery Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

随机推荐

  1. C#支付宝多次回调问题

    //必须删除掉页面上的默认内容,不然支付宝会多次回调 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q ...

  2. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  3. 关于spring boot启动监控端点的方法(spring-boot-starter-actuator)

    前言: 在spring boot的旧版本中,监控端点(如/env)是默认开启的,所以只要项目正常启动,就能通过url获取信息.可是在2.0版本以后,由于安全性考虑,除了/health和/info的端点 ...

  4. netstat 在windows下和Linux下查看网络连接和端口占用

    假设忽然起个服务,告诉我8080端口被占用了,OK,我要去看一下是什么服务正在占用着,能不能杀 先假设我是在Windows下: 第一列: Proto 协议 第二列: 本地地址[ip+端口] 第三列:远 ...

  5. hibernate的三种状态和缓存

    hibernate的三种状态: 1.瞬时态:对象里面没有id值,对象与session没有关联 类似,把class类new出来,不存进session 2.持久态:对象里面有id值,对象与session关 ...

  6. C# txt文件的读取与写入

    C#创建记事本方法一://创建对象 FileStream stream = new FileStream(@"d:\aa.txt",FileMode.Create);//fileM ...

  7. PHP的session的实现机制

    一.默认机制,用磁盘文件来实现PHP会话.php.ini配置:session.save_handler = files 1.session_start() A. session_start()是ses ...

  8. 《剑指offer》第六十题(n个骰子的点数)

    // 面试题60:n个骰子的点数 // 题目:把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s // 的所有可能的值出现的概率. #include <iostream> ...

  9. mint 安装过程

    这几天因为各种原因装系统(自己因为双屏不能旋转,输入法界面始终矬,重装2次(应该都是更新内核和更新时包依赖不对的锅,以后屏蔽内核更新和linux-libc-dev这样的更新,要么就新版本出来重装),和 ...

  10. qt.network.ssl: QSslSocket: cannot call unresolved function SSLv23_client_method

    使用Qt编写程序访问知乎官网,程序报错 qt.network.ssl: QSslSocket: cannot call unresolved function SSLv23_client_method ...