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

3,162 阅读1分钟

#我的需求

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