JSP 頁面 CSS 背景圖片無法顯示？路徑解析與除錯全攻略

現象描述

在 JSP 頁面引用 CSS 設定背景圖片，CSS 檔案中按 Ctrl+點擊可預覽圖片，但瀏覽器開發者工具顯示圖片 404 或載入失敗。

根本原因：相對路徑基準不同

• CSS 檔案內的相對路徑：以 CSS 檔案所在目錄 為基準。
• JSP 頁面內的相對路徑：以 JSP 請求 URL 路徑 為基準（非檔案系統路徑）。

當 JSP 與 CSS 位於不同目錄層級時，同一個相對路徑指向的實際資源位置不同，導致圖片找不到。

三種解決方案

方案一：使用絕對路徑（推薦）

在 CSS 中以網站根目錄開頭：

.hero { background-image: url('/images/bg.jpg'); }

前綴 / 代表部署後的 Context Path 根目錄，不受 CSS/JSP 位置影響。

方案二：JSP 動態輸出 Context Path

<style>
.hero { background-image: url('<%=request.getContextPath()%>/images/bg.jpg'); }
</style>

或在 JSP 頁面定義基底變數：

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" href="${ctx}/css/style.css">

方案三：CSS 放置於 Web 根目錄，圖片放同層 images 資料夾

webapp/
├─ css/style.css
├─ images/bg.jpg
└─ jsp/page.jsp

CSS 寫法：background-image: url('../images/bg.jpg');（相對 CSS 檔案位置）

除錯步驟（F12 大法）

1. 開啟瀏覽器開發者工具（F12）→ Network 頁籤 → 重新整理頁面。
2. 篩選 Img 或 CSS，找到背景圖片請求。
3. 查看 Request URL 是否為預期路徑，狀態碼是否 200/304。
4. 若為 404，點擊請求查看完整 URL，對照專案目錄結構修正路徑。

常見誤區對照表

總結

JSP 引用 CSS 背景圖片失敗 90% 是路徑基準不一致。**統一使用以 Context Path 為起點的絕對路徑**，配合瀏覽器 Network 面板快速定位，即可徹底解決。