img使用src动态请求图片，同时需要设置请求头header的问题

目前做的项目里面有个二维码是动态加载出来的，最初使用vue双向绑定src实现了src能自动请求图片。
html

<img :src="src">

js

data:{
	src:''
},
mounted: function(){
	this.src = 'xxxxx/xxxxx/xxx?phoneNum='+phoneNum+'&width=200&height=200'
}

但是后台加上鉴权后，需要每个接口在header里面加上token，查找相关方法后只好舍弃了这种做法，改用最原始的ajax去请求。
html

<img id="img" authsrc="/xxxx/xxxx/xxxx" alt="">

js

Object.defineProperty(Image.prototype, 'authsrc', {
    writable : true,
    enumerable : true,
    configurable : true
  })
  var img = document.getElementById('img');
  var url = img.getAttribute('authsrc');
  var request = new XMLHttpRequest();
  request.responseType = 'blob';
  request.open('get', url+'?phoneNum='+phoneNum+'&width=200&height=200', true);
  request.setRequestHeader('actoken', token);
  request.onreadystatechange = e => {
      if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
          img.src = URL.createObjectURL(request.response);
          img.onload = () => {
              URL.revokeObjectURL(img.src);
          }
      }
  };
  request.send(null);

这样，就可以使用request.setRequestHeader(‘actoken’, token)来设置请求头了，如果url参数不能在src里面写死，大家可以向上面那样在open里面加上相关参数，然后就可以正常加载出来了。

原文地址：https://segmentfault.com/a/1190000020366227