因为后台返回的本身就是一张二进制流的图片,所以设置img标签的src 等于这个二进制流图片不是行的。
img标签想要显示图片,必须的一个图片相对的路径,而不是一张图片。
那么问题来了,我们如何进二进制流图片的转换呢?
我们可以利用Blob对象来进行转换
不多废话直接看栗子 :
var xhr = new XMLHttpRequest();
xhr.responseType = "blob"; //因为后台返回一个图片,所以需要设置响应消息的对象为blob
xhr.onreadystatechange = function()
{
if(4 === xhr.readyState)
{
if(200 === xhr.status)
{
var blob = this.response; //返回的是一个blob对象
var src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
console.log(src);
//src 就是一个可以显示图片的相对路径。因为window.URL.crateObjectURL(blob)已经进行了转换
}
}
}
xhr.open("get", url, true); //默认值是true
xhr.send(null);
url 是你请求验证码API接口的地址