vue 图片验证码base64

### 实现 Vue 中生成并显示 Base64 格式的图片验证码

为了在 Vue 项目中实现这一功能，前端需要向后端发送请求获取验证码图像数据，并将其作为 Base64 编码字符串处理以便于展示。下面具体说明如何操作。

#### 后端准备
假设已经有一个基于 Spring Boot 的接口来创建图形验证码并将该图转化为 Base64 字符串形式返回给客户端[^1]：

// Java (SpringBoot) 示例代码片段
@GetMapping("/captcha")
public ResponseEntity<Map<String, String>> getCaptcha() {
    Map<String, String> result = new HashMap<>();
    // 创建验证码逻辑...
    String base64String = "iVBORw0KGgoAAAANSUhEUgAAAAU...";
    result.put("url", "data:image/png;base64," + base64String);
    return ResponseEntity.ok(result);
}

此段代码展示了服务端如何构建响应对象 `result` 并设置其属性 `"url"` 来存储带有 MIME 类型前缀的数据 URI 方案表示法的 Base64 编码图像字符串。

#### 前端集成
接下来，在 Vue 组件内部通过 HTTP 请求调用上述 API 接口以获得包含 Base64 数据 URL 的 JSON 结果。可以利用 Axios 库简化 AJAX 调用过程[^2]:

import axios from 'axios';

export default {
  data () {
    return {
      captchaUrl: ''
    }
  },
  methods: {
    async fetchCaptchaImage () {
      try {
        const response = await axios.get('/api/captcha');
        this.captchaUrl = response.data.url;
      } catch (error) {
        console.error('Failed to load CAPTCHA image:', error);
      }
    }
  },
  mounted () {
    this.fetchCaptchaImage();
  }
};

这里定义了一个名为 `fetchCaptchaImage()` 方法用于发起 GET 请求至 `/api/captcha` 地址从而取得最新的验证码信息；一旦成功接收到回复，则更新组件状态变量 `captchaUrl` ，这会触发视图重新渲染。

最后一步是在模板部分使用 `<img>` HTML 元素绑定动态计算出来的 `src` 属性值，即之前提到过的 Base64 编码后的图像链接地址[^3]:

<template>
  <div class="captcha-container">
    <!-- 使用 v-bind 动态指定 src -->
    <img :src="captchaUrl" alt="CAPTCHA Image"/>
    <button @click="fetchCaptchaImage">刷新验证码</button>
  </div>
</template>

<style scoped>
/* 添加样式 */
.captcha-container img { width: 150px; height: auto; margin-bottom: .5em;}
</style>

这样就完成了整个流程——从前端发出请求到接收来自服务器端经过编码处理好的图片资源再呈现在页面上供用户查看的过程。