Vue获取接口返回的图片验证码

最新推荐文章于 2024-05-29 00:45:25 发布

Tahn

最新推荐文章于 2024-05-29 00:45:25 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45591598/article/details/126690092

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

<el-row>
        <el-col :span="15">
          <el-form-item prop="code">
            <span class="svg-container">
              <svg-icon icon-class="validCode" />
            </span>
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 50%"
              :maxlength="4"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <div class="login-code">
            <div v-if="!captchaImage" class="login-code-img" @click="getCaptchaImage()">获取验证码</div>
            <img v-else :src="captchaImage" alt="" @click="getCaptchaImage()">
          </div>
        </el-col>
      </el-row>

JS

created() {
    this.getCaptchaImage()
},
methods: {
    getCaptchaImage() {
      // 加随机数防止浏览器缓存验证码图片
      var http = 'http://192...'
      this.captchaImage = http + '/system/login/captcha?rand = ' + Math.random() * (10 - 0)
    }
}