大概效果是如下图的,右边图片可以随机变化,然后进行验证
首先html代码如下
这样先确定样式;然后接下来是js代码
验证码图片的路径是通过调用 getCodeImg
方法获取的,这个方法是是向后端发起一个异步请求,获取验证码图片及相关信息的接口。
其中“this.codeUrl = "data:image/gif;base64," + res.img;”是关键;使用 Base64 编码方式拼接成了一个 Data URL,并赋值给 codeUrl
,然后在前端页面中使用这个路径来显示验证码图片。