Vuetify —— 实现图形验证码

最新推荐文章于 2025-10-30 14:18:53 发布

原创最新推荐文章于 2025-10-30 14:18:53 发布 · 844 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该博客讨论了如何在前端页面中显示由后端返回的Base64格式的图形验证码。通过使用Vue组件和vuetify库，创建了一个包含输入框和验证码图像的表单元素。验证码图片被定位在输入框的右侧，确保用户可以方便地查看并输入验证码。这个过程涉及到前端与后端的数据交互，以及Base64字符串在浏览器中的渲染。

在这里插入图片描述
调取接口，后端返回的图形验证码数据格式是base64图片路径，根据其数据将其渲染值页面中

在这里插入图片描述

<v-row v-if="showCaptcha">
  <v-col class="px-0" cols="12" style="position: relative">
    <v-text-field
      solo
      label="请输入图形验证码"
      prepend-inner-icon="mdi-check-circle-outline"
      v-model="verify_code"
      required
      :rules="rules.isFull"
    ></v-text-field>
    <img
      style="position: absolute; top: 4px; right: 4px"
      :src="captcha_image"
      alt=""
    />
  </v-col>
</v-row>