1、如果没有权限验证,则简单
<img src="请求全部链接填进去即可" />
2、如果需要发送get请求,那么就需要先把图片转成Blob
对象,然后再进行转化!方法如下,
return request({ url: url, method: 'get', responseType:'blob', // 核心点,即http请求的时候让浏览器把响应数据设置成blob,然后再通过js转成图片 params })
响应responseType
xhr.response的数据类型
responseType值 | xhr.response 数据类型 | 说明 |
---|---|---|
"" | String 字符串 | 默认值(在不设置responseType 时) |
"text" | String 字符串 | |
"document" | Document 对象 | 希望返回 XML 格式数据时使用 |
"json" | javascript 对象 | 存在兼容性问题,IE10/IE11不支持 |
"blob" | Blob 对象 | |
"arrayBuffer" | ArrayBuffer 对象 |
我们获取到了blob对象后,然后再通过FileReader
把blob对象转成图片,代码如下
方法1
.then((res) => { var reader = new FileReader() reader.readAsDataURL(res) //读取文件保存在result中 const that = this reader.onload = function (e) { that.imgURL = [e.target.result] //e.target.result即为转换后的base64图片 } })
方法2
this.imgURL = [(URL || webkitURL).createObjectURL(res)]
兼容性的话 都半斤八两!
题外
如果ajax都封装了,则在封装上加一层验证,因为请求的是图片,是没有状态码返回的!
response => { const res = response.data if(response.config.url=="请求的url"){ return res }