vue中处理后台返回的图片流，并将图片流显示在前端

1.这个是后台返回的接口流（上图）

vue代码

<template>
<div>
<img :src="params">
</div>
</template>
<script>
import axios from 'axios'
const server = axios.create({
tiomout: 5000,
})
server.interceptors.request.use(
  config => {
   return config
},
error => {
 return Promise.reject(error)
},
)
export default {
name: 'Login',
data() {
  return{
    params: '',
  }
},
created() {},
methods: {
 imgClick() {
  server({
    url: '/sms/getImgCode',
    method: 'post',
    params: '',
    responseType: 'blod',
  }).then(res => {
   const href = window.URL.createObjectURL(res.data)
   this.params = href
   })
  }
 }
}
</script>

这样写的话图片就能显示出来

2.做成组件来显示也可以

（1).在请求后端接口返回response

const src = window.URL.createObjectURL(response)//这里也是关键,调用window的这个方法URL方法
this.verifyCode = src

(2).在自己想要的地方加入

<img :src="verifyCode" style="float:right;">