vue项目前端处理后端返回的图片

做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片

就像这样的

<el-form-item label="验证码" prop="name">
  <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
  <div class="verification">
    <img :src="this.verificationImg" alt="" @click="acquireVerification">
  </div>
</el-form-item>

我这是使用了 element-ui ，普通的输入框也是可以的

data () {
  return {
    verificationImg: '',
    ruleForm: {
      verification: ''
    }
},

acquireVerification () {
	// {responseType: 'blob'} ，不加这个返回的就是乱码
  axios.get('/api/verifyCode', {responseType: 'blob'}).then((response) => {
    console.log(response.data)
    this.verificationImg = window.URL.createObjectURL(response.data)
    console.log(this.verificationImg)
  })
}


mounted () {
  this.acquireVerification()
}

.verification {
  position: absolute;
  right: 0px;
  top: 0px;
}