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

重新開啟同一人員的資料修改介面——成功顯示剛才更新過的圖片！！

l原理：

由於在img的src中增加了隨機數引數，多次訪問圖片時，瀏覽器認為是訪問了不同的圖片路徑(或者說是訪問了不同的圖片），瀏覽器會每次重新訪問伺服器讀取圖片，而不再讀取快取中的圖片。

相關參考：

Jsp頁面中關於客戶端圖片快取的解決

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

JSP解決圖片快取問題

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