vue 从后端获取验证码图片实例

在 Vue 中从后端获取验证码图片可以使用 Axios 库来发送 HTTP 请求，并使用 `<img>` 标签来显示验证码图片。以下是一个简单的示例代码：

<template>
  <div>
    <img :src="captchaUrl" alt="验证码">
    <button @click="refreshCaptcha">刷新验证码</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      captchaUrl: '',
    };
  },
  created() {
    this.refreshCaptcha();
  },
  methods: {
    refreshCaptcha() {
      axios.get('/api/captcha')
        .then(response => {
          this.captchaUrl = response.data.url;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

在上面的代码中，我们使用了 Vue 的计算属性来动态地显示验证码图片的 URL。当用户点击“刷新验证码”按钮时，我们使用 Axios 发送了一个 GET 请求到 `/api/captcha` 接口，并将返回的验证码图片的 URL 赋值给 `captchaUrl` 属性。然后，`<img>` 标签会自动加载新的验证码图片。

当然，你需要根据你自己的后端接口来修改代码中的 URL 和参数。