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

我的需求

请求发送：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">