目錄結構範例
WebContent/ (或 webapp/)
├── static/
│ └── css/
│ └── bootstrap.min.css
├── WEB-INF/
│ ├── web.xml
│ └── jsp/
│ └── index.jsp
錯誤嘗試與原因
| 寫法 | 結果 | 原因 |
href="bootstrap.min.css" | 404 | 相對於 JSP 路徑 WEB-INF/jsp/,找不到檔案 |
href="./bootstrap.min.css" | 404 | 同左 |
href="D:/bootstrap.min.css" | 瀏覽器拒絕 | 本機絕對路徑受同源策略阻擋,無法跨協議載入 |
正確寫法 (三選一)
1. EL 表達式 + contextPath (推薦 JSP)
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
2. JSTL core url 標籤
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<c:url value="/static/css/bootstrap.min.css" var="cssUrl" />
<link rel="stylesheet" href="${cssUrl}">
3. Scriptlet (不推薦,僅相容舊專案)
<link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/bootstrap.min.css">
核心原則
- 所有靜態資源 (CSS/JS/圖片) **必須放在 WebContent 根目錄下的公開資料夾** (如
static/、resources/),而非 WEB-INF/ 內。
- 引用路徑**必須包含 contextPath**,否則部署到非根路徑 (如
https://host/myapp/) 時會 404。
- 生產環境建議配置 Nginx/Apache 直接服務靜態資源,並啟用瀏覽器快取 (
expires 1y)。
Spring Boot / Maven 專案對應位置
src/main/resources/static/css/bootstrap.min.css → 自動映射到 /static/css/...
src/main/webapp/static/css/bootstrap.min.css → 傳統 WAR 專案