axios获取后端传来非路径格式的图片
先说一下最近的项目里用到的相关的技术:vue,element-ui,axios,store
————好,我们看下场景————
最近做项目的时候发现有这么个需求
1、表格里展示一堆包括业务的信息,其中包括带图片简要信息的数据
2、点击这个单元格需要显示出照片,当然此时需要按需对后台发起请求数据
结果:(本来作为一个前端当然希望给一个src路径绑定就完事了,好,现在我的后台搞事,返回了一个mimetype类型的image/jpeg格式图片,简称一堆看似乱码的data,但是却能在response查看这个图片,在这里我以一个小白身份告诉大家这个data直接绑定img标签的src里是没办法显示的。别问,一问就是不能,我能咋办嘛。)
下面是比较关键的处理方式:
在翻阅了各种网站,找到了一种比较简便的方法,两步比较关键的点,贴上代码。
1、我们需要在项目接口api管理配置中,这里我已经把axios接口封装好了,不需要封装的同学直接就this.axios({})就好了,一样的。好,关键地,把response-type改为blob类型
//接收图片接口
export function getDpImg(params){
return request({
url:'pictures',
methods:'get',