vue3前端对接后端的图片验证码

<template>
<image :src="captchaUrl" alt="图片验证码" @click="refreshCaptcha"></image>
</template>

<script setup>
    import {
		ref
	} from "vue";
    import {
		useCounterStore
	} from '@/store-pinia/counter'
    const counter = useCounterStore()
    const captchaUrl = ref('');
	const uuid = ref('')
    //uuid随机生成
	const getUUID = () => {
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => 		{
			return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
		})
	}
	//刷新二维码
	const refreshCaptcha = () => {
		uuid.value = getUUID()
        //counter.baseUrl这个是一个地址如：http:/***.***/api，我这里用pinia的缓存了地址
        //captchaUrl就是你的后端给你的图片接口地址 效果图如下
		captchaUrl.value = counter.baseUrl + '/captcha.jpg?uuid=' +uuid.value
	}
</script>