##题记：我们实现一个功能首先想一下我们需要做哪些工作，比如我们需要生成一个随机的图片验证码，我们需要一个就是点击事件获取验证码，通过接口我们去获取图片路径进行渲染就行，这里边还要牵扯一件事情就是获取一个随机数字，通过随机数字我们传给后端索取一个随机图片；
##逻辑图：
##效果图：
##代码实现：
###01.定义变量；
identifyCode2: '',//随机数字
downloadUrl：'',//图片路径###02.随机数的方法；
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
// 生成四位随机验证码
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode2 += this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
]
}
},###03.验证码的方法；
// 获取图片验证码
refreshCode() {
api.captcha({ sessionId: this.identifyCode2 }).then((res) => {
if (res.success) {
this.downloadUrl = res.data
this.sessionId = this.identifyCode2
}
})
},###template实现；文章来源：https://www.toymoban.com/news/detail-624822.html
<span class="refreshCode" @click="refreshCode">
<img :src="downloadUrl" width="100" height="36">
</span>喜欢的话点个赞吧！！！文章来源地址https://www.toymoban.com/news/detail-624822.html
到了这里，关于前端生成图片验证码怎么做？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
