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"></img>

推荐阅读更多精彩内容

  • 一、本周情境1.工作:出差回到公司,进行总结、培训、任务扫尾,参加年会。2.素质:周计划落地实践指导及月目标的达成...
    严哥阅读 133评论 0 0
  • 早起出门,终于想要买个早餐,拿着包子掏钱的时候发现钱包没带,尴尬的递给老板说不好意思忘记带钱了,老板笑着说:拿着吧...
    Joysmile阅读 69评论 0 0
  • 2015.8.6——2017.8.6我们在一起整整两年,七百三十天,一万七千五百二十个小时…………想说些什么却又不...
    轩浅笑阅读 70评论 0 0
  • 总有一种时地,光阴、现实、虚幻、空间与宿居的此地,如此交错汇聚,像是河流途经两岸发出的低鸣,像是穿越古老宫殿的金发...
    子瑈阅读 258评论 10 16