AXIOS从服务器加载图片并显示

96
陈SunMoon
0.1 2017.08.09 10:32* 字数 91

我的需求

请求发送:axios 、前段:vue

  1. 服务器不返回图片的url地址,返回图片的数据
  2. 获取图片需要登录验证。

请求配置

指定响应类型未blob

axios.get(`图片url`, { responseType: 'blob'})

读取图片

使用FileReader 的readAsDataURL读取图片

let reader = new FileReader()
reader.onload = (e) => {
   this.pic = e.target.result
 }
reader.readAsDataURL(res)

使用图片

将获取到的字符串赋值给img的src即可

< img :src="pic"></img>
vue