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;">