JSP页面img图片缓存问题处理

JSP页面img图片缓存问题现象表述及问题解决

l  问题表述：

当对含有头像的客服人员信息进行修改(含对头像信息的修改)后，重新打开数据修改界面，发现文本内容修改成功，而头像内容仍然显示为原来的头像——数据库中的对应信息头像所在字段数据已经成功更新。

 

l  前提：

jsp页面中进行了页面缓存清除处理：

<meta http-equiv="pragma" content="no-cache"/>

<meta http-equiv="cache-control" content="no-cache"/>

<meta http-equiv="expires" content="0"/>

当然，下边3行代码功能与上边的3行功能相同，页面中仅写一份

<%

response.setHeader("Pragma","No-Cache");

response.setHeader("Cache-Control","No-Cache");

response.setDateHeader("Expires", 0);  

%>

 

l  问题情景再现：

原jsp中img src写法：

<img src="<%=path%>/servlet/customer/personPic?cspId=${cspId}"></img>

 

要修改的数据界面：

 

修改数据后，再次进入此条数据的修改界面：

发现虽然其它文本字段都进行了相应修改，但是“头像”部分并没有修改为我们指定的图片(如下图,头像仍然显示为一个“叉”的形状)

查询数据库，发现数据库中的头像对应的blob字段中的数据已经更改为指定的图片。

 

l  问题解决(共两步)：

（1）修改servlet：在进行数据读取的servlet中增加图片随机数代码

       //图片随机数

       double randomNum = Math.random();

       request.setAttribute("randomNum", randomNum);

（2）更新前台数据修改jsp：图片显示img标签的src中增加“randomNum”参数

<img src="<%=path%>/servlet/customer/personPic?cspId=${cspId}&randomNum=${randomNum}"></img>

 

重新打开同一人员的数据修改界面——成功显示刚才更新过的图片！！

 

 

l   原理：

由于在img的src中增加了随机数参数，多次访问图片时，浏览器认为是访问了不同的图片路径(或者说是访问了不同的图片），浏览器会每次重新访问服务器读取图片，而不再读取缓存中的图片。

 

 总结：若以上方法都无法解决，就通过Java输出流直接写到前台，类似后台验证码的生成。

 

相关参考：

Jsp页面中关于客户端图片缓存的解决

http://damiao-cn.javaeye.com/blog/371216

 

JSP解决图片缓存问题

http://wuaner.javaeye.com/blog/395443