修改image的src属性，图片不刷新的问题

做的验证码功能，但是发现点击刷新后验证码图片却不刷新。

一、问题产生

背景：前端呈现验证码图片，并且提供刷新功能，请求后端，后端提供验证码图片。

问题：发现刷新功能失效。

关键代码：</p>

1	<img th:src="@{/auth/genericImageLogin}" id="verifyCodeLoginImage" onclick="refreshVerifyCodeLogin()" style="width:82px;height:34px"/>

说明：th:src=”@{/auth/genericImageLogin}” 是 themeleaf 模板的使用写法，请求后端 java 程序。

1
2
3

&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;refreshVerifyCodeLogin(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#verifyCodeLoginImage").attr(&#39;src&#39;,&nbsp;"/auth/genericImageLogin");
&nbsp;&nbsp;&nbsp;&nbsp;}

二、原因分析

图片不刷新是因为，验证码图片的请求地址是同一个，所以高版本的浏览器会默认读取缓存，即并不会向后端发出请求。

三、问题解决

问题解决也就很简单了，那我们就保证每次请求的地址不一致不就ok了。

所以我们就在请求地址后增加随机数参数。

1
2
3

&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;refreshVerifyCodeLogin(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#verifyCodeLoginImage").attr(&#39;src&#39;,&nbsp;"/auth/genericImageLogin?"+Math.random());
&nbsp;&nbsp;&nbsp;&nbsp;}