现象:
刷新浏览器页面,图片验证码不显示,点击图片验证码区域以后,才能显示也可以切换显示下一个。
排查思路:
调用开发者工具,检查是否向后端发起获取图片验证码请求。
- 如果生成了图片uuid编号,发送了请求,则问题出在服务器端。查看后端日志,检查接口及视图。
- 如果没有发送请求,定位前端问题。可以点击切换图片,证明绑定了src链接,绑定了click单击事件,页面加载时没显示,需要注意请求钩子mounted
最终定位:
vue中钩子函数mounted未调用执行。需要在vue的method上方,加入mounted请求钩子,在页面加载完成即发送一次图片验证码请求。
mounted: function(){
this.generate_image_code(); # 调用生成图片验证码函数
},