Vue3做登录图片验证码总结

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

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

思路

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

实现

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

点击图片刷新出新图片

思路

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

实现

<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>