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>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui