img使用src动态请求图片,同时需要设置请求头header的问题
目前做的项目里面有个二维码是动态加载出来的,最初使用vue双向绑定src实现了src能自动请求图片。html<img :src="src">jsdata:{src:''},mounted: function(){this.src = 'xxxxx/xxxxx/xxx?phoneNum='+phoneNum+'&width=200&height=20...
·
目前做的项目里面有个二维码是动态加载出来的,最初使用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里面加上相关参数,然后就可以正常加载出来了。
更多推荐
已为社区贡献1条内容
所有评论(0)