日常显示图片都诸如这种形式:直接使用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. JavaScript获取星期几的几种方法

    星期几的4种JS代码写法,有需要的朋友可以参考一下   第一种写法 代码如下: var str = ""; var week = new Date().getDay(); if ( ...

  2. jquery.validate使用详解

    一.简单应用实例: 1.用class样式进行验证,用法简单,但不能自定义错误信息,只能修改jquery-1.4.1.min.js中的内置消息,也不支持高级验证规则. <script type=& ...

  3. 通用程序返回结果类 ApplicationResult.cs

    using System.Collections.Generic; using System.Linq; namespace System { /// <summary> /// 表示应用 ...

  4. Redis 个人理解总结

    一.什么是Redis ? Redis(remote dictionnary server)是一个key-value存储系统.Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可 ...

  5. 前端调用接口报错看不到报错响应时 console.dir

    console.dir() 可以看到很多.log看不到的属性和方法

  6. windows设置程序开机自启动

    在msconfig里面进行设置的前提是,这个程序已经在自启动列表中,只是没有被勾选上, 对于不在该启动列表里的程序需要: ①找到这个应用程序所在的位置; ②右击发送到桌面快捷方式;  ③在Window ...

  7. winfrom datagridview ,picturebox,显示图片,以及删除问题

     private void write_listview(DataSet ds)         {             DataTable dt = ds.Tables[0];          ...

  8. php后台操作以及一些减缓服务器压力的问题

    上次提到一个微信投票系统,做了一个微信重定向解决了,一个授权复用的问题,昨天投票系统正式投入使用:测试的时候没有问题,上线后出现了一点小问题, 一:php页面参数接受和php中 switch 那个先执 ...

  9. Python全栈开发-Day12-Mysql数据库和ORM

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql ORM sql ...

  10. h5游戏引擎有哪些

    h5游戏引擎有哪些 一.总结 一句话总结: Layabox Egret Pixi.js Three.js PlayCanvas Cocos2d-js Hilo 1.H5游戏开发语言? Flash_AS ...