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>
相关推荐
中微子23 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina26 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空2 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui