Vue3做登录图片验证码总结

最近正在做登录图片验证码功能,里面涉及到一些没用过的知识点,就浅浅记录一下。下图是我做好的效果。

img中src直接调接口获取后端图片

思路

使用img的时候,src属性一般都是写一个图片的url地址,如xxx.jpg,但其实img的src属性本身是可以发起get请求,只需要把请求地址给到src,后端接收到请求后,返回给我们一张图片。

实现

ini 复制代码
let url = "xxx" // url为请求地址
<img :src="url" alt="验证码图片" />

点击图片刷新出新图片

思路

我一开始的思路是,添加点击事件,点击的时候将之前的请求地址再赋值给src,结果没有再次请求。因为请求地址没有发生变化,存在缓存。解决方法:在src的图片路径后面指定一个随机数参数就可以了,这样你每次去请求时,浏览器认为你每次是访问了不同的图片路径,从而每次都会重新访问服务器读取图片,而不再读取缓存中的图片。虽然该随机数没有什么实际含义,但对浏览器而言,请求地址是不一样的。

实现

xml 复制代码
<template>
  <div @click="refreshImg">  
    <img :src="requestUrl" alt="验证码图片" />  
  </div>
</template>

<script setup lang="ts">
// 请求地址
const requestUrl = ref("xxx")
const refreshImg = () => {
  requestUrl.value = "xxx?" + Math.random()
}
</script>
相关推荐
Dolphin_海豚2 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件5 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe199141 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平43 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown44 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee1011 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 小时前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac