最近做的项目中有个需求是：二维码是动态加载出来的（通过接口请求回来的，请求中请求体中要带token），最初使用vue双向绑定src实现了src能自动请求图片。

所以去网上搜索，找了很多种方法，都没有好的，大多数还要后台配合修改，最终找到了一个比较通用的解决方法：

1. 通过 id 获取元素，然后获取其 url
2. 手动发送 XMLHTTPRequest 请求，这个请求中可以在请求头中添加任意的参数
3. 将返回的图片通过 URL.createObjectURL 方法转成 url 后赋值给开始获取到的 img 标签即可

// 给 Image 的原型链上定义一个 authSrc 属性，名字随意起，不跟原生的属性重名即可
Object.defineProperty(Image.prototype, 'authSrc', {
  writable : true,
  enumerable : true,
  configurable : true
})

function getImage(domId) {
	const img = document.getElementById('img'); // 获取要手动添加请求头部信息的img元素
	const url = img.getAttribute('authSrc');
	const request = new XMLHttpRequest();
	request.responseType = 'blob';
	request.open('get', url, true);
	request.setRequestHeader('token', localStorage.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);
}
getImage('img')

这样使用：

<img id="img" auth-src="xxx/asdg/adff" />