Vue+axios 前端頁面展示后台傳回的二進制流圖片

輸入框和圖片的vue.js代碼

<!--圖片-->
            <el-form-item >
                <el-col :span="12">
                    <!--輸入圖片驗證碼-->
                    <el-form-item prop="captcha">
                        <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="驗證碼, 單擊圖片刷新"
                                  style="width: 100%;">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="1">&nbsp;</el-col>
                <el-col :span="11">
                    <!--圖片-->
                    <el-form-item>
                        <img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha">
                    </el-form-item>
                </el-col>
            </el-form-item>

在

data(){
	loginForm:{
                    userid:'admin',
                    password:'123',
                    captcha:'',
                    src:''
                },
}

methods:{
     refreshCaptcha(){
               this.$http.get('/Captcha.jpg',{
                   responseType: 'arraybuffer',

               })
                   .then(response => {
                       return 'data:image/png;base64,' + btoa(
                           new Uint8Array(response.data)
                               .reduce((data, byte) => data + String.fromCharCode(byte), '')
                       );
                   }).then(data => {
                   this.loginForm.src = data
               })
                console.log(this.loginForm.src)
            },
}

mounted(){
            this.refreshCaptcha()
        }

圖片