Eclipse Web 開發：圖片部署後無法顯示的排查與解決

問題現象

在使用 Eclipse 開發 Web 應用時，將圖片放置於 Web 工程目錄下，並在 JSP 中通過相對路徑引用。專案部署到 Tomcat 伺服器後，網頁中圖片無法顯示，控制台亦無明顯錯誤。

常見原因分析

1. 路徑錯誤：JSP 中使用的相對路徑與部署後的實際資源路徑不匹配。例如圖片放在 WebContent/images/logo.png，但 JSP 寫成 <img src="logo.png">，導致瀏覽器請求錯誤 URL。
2. 部署路徑不一致：Eclipse 發布到 Tomcat 時，工程可能部署為 ROOT 或自定義 Context Path，導致相對路徑基準變化。
3. 資源未被複製到輸出目錄：圖片未包含在 Deployment Assembly 中，導致打包 WAR 時遺漏。
4. 大小寫敏感：Linux 伺服器區分大小寫，路徑大小寫不一致會導致 404。

排查步驟

1. 啟動伺服器後，在瀏覽器開發者工具 Network 面板查看圖片請求 URL 與回應狀態碼（通常為 404）。
2. 對比請求 URL 與專案實際目錄結構，確認相對路徑基準是否為專案根目錄或 Context Path。
3. 檢查 web.xml 或 server.xml 中的 Context Path 設定。
4. 在 Eclipse 中右鍵專案 → Properties → Deployment Assembly，確認圖片所在資料夾已映射到 / 或 /images。

解決方案

1. 使用絕對路徑（推薦）

在 JSP 中使用 ${pageContext.request.contextPath} 動態獲取 Context Path：

<img src="${pageContext.request.contextPath}/images/logo.png" alt="Logo">

或使用 JSTL c:url：

<c:url value="/images/logo.png" var="logoUrl"/>
<img src="${logoUrl}" alt="Logo">

2. 確保資源包含在部署中

Eclipse 專案 Properties → Deployment Assembly → Add → Folder → 選擇存放圖片的資料夾（如 WebContent/images），Deploy path 設為 /images。

3. 驗證大小寫一致性

檢查檔案名稱、資料夾名稱、JSP 中引用路徑的大小寫完全一致。

最佳實踐

• 統一將靜態資源（圖片、CSS、JS）放在 WebContent/resources 或 src/main/webapp/resources（Maven 專案）。
• 在 JSP 中一律使用 ${pageContext.request.contextPath} 或 c:url 生成資源路徑。
• 部署前執行 Maven clean package 或 Eclipse Clean，確保輸出目錄乾淨。
• 生產環境建議使用 Nginx/Apache 代理靜態資源，減輕 Tomcat 壓力。

總結：圖片部署後不顯示多數源於路徑錯誤或資源未正確部署。採用動態 Context Path 生成絕對路徑，並確保 Deployment Assembly 正確配置，即可徹底解決。