根据后端验证码接口地址，前端显示验证码

<template>
  <div class="main-content-container container-fluid h-100 px-4">
    <d-row no-gutters class="h-100">
      <d-col lg="3" md="5" class="auth-form mx-auto my-auto">
        <d-card>
          <d-card-body>
            <!-- Logo -->
            <img
              class="auth-form__logo d-table mx-auto mb-3"
              src="@/assets/images/shards-dashboards-logo.svg"
              alt="Shards Dashboards - Login Template"
            />

            <!-- Title -->
            <h5 class="auth-form__title text-center mb-4">Access Your Account</h5>

            <!-- Form Fields -->
            <d-form>
              <div class="form-group">
                <label for="username">用户名</label>
                <d-input type="text" id="username" placeholder="用户名" :value="formData.username" />
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <d-input type="password" id="password" placeholder="密码" :value="formData.password" />
              </div>
              <div class="form-group">
                <label for="chptacha">验证码</label>
                <div class="captacha">
                  <d-input type="text" id="chptacha" placeholder="验证码" :value="formData.chptacha" />
                  <img :src="formData.imgUrl" @click="updateCode">
                </div>
              </div>
              
              <d-button pill type="submit" class="btn-accent d-table mx-auto">登录</d-button>
            </d-form>
          </d-card-body>

          
        </d-card>

        
      </d-col>
    </d-row>
  </div>
</template>

<style>
div.captacha {
  display: flex;
}
</style>

<script>
import axios from ‘axios‘;

export default {
  data() {
    return {
      formData: {
        username: ‘‘,
        password: ‘‘,
        chptacha: ‘‘,
        imgUrl: ‘‘,
      },
    };
  },
  created() {
    this.updateCode();
  },
  methods: {
    updateCode() {
      axios.get(‘后端验证码接口url‘, { responseType: ‘arraybuffer‘ }).then((res) => {
        this.formData.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ‘‘))}`;
      });
    },
  },
};
</script>