如何在 Tomcat 中正确引用静态资源（CSS/JS/图片）-html教程-PHP中文网

本文详解 Spring Boot 项目中 Tomcat 无法加载 CSS 等静态资源的根本原因，阐明默认静态资源路径规则、标签的路径解析逻辑，并提供可靠解决方案（含绝对路径写法、Thymeleaf 推荐用法及配置建议）。

本文详解 spring boot 项目中 tomcat 无法加载 css 等静态资源的根本原因，阐明默认静态资源路径规则、`` 标签的路径解析逻辑，并提供可靠解决方案（含绝对路径写法、thymeleaf 推荐用法及配置建议）。

在 Spring Boot + Tomcat 的 Web 应用中，初学者常遇到无法加载样式文件的问题——浏览器控制台报 404，而 style.css 实际位于 src/main/resources/static/css/style.css。这并非 Tomcat 配置错误，而是对 Web 资源路径解析机制 的误解。

? 根本原因：相对路径基于请求 URL，而非文件系统位置

JSP 或 HTML 中的 href="css/style.css" 是相对于当前页面的请求路径（URI），而非项目目录结构。例如：

若你通过 http://localhost:8080/index.jsp 访问页面，浏览器会尝试请求 http://localhost:8080/css/style.css；
但 Spring Boot 默认将 static/ 下的资源映射到根路径 /，即 static/css/style.css 可通过 http://localhost:8080/css/style.css 直接访问；
因此，只要确保 HTML 中的路径与该映射规则一致，即可成功加载。

✅ 正确做法：使用以 / 开头的绝对路径（上下文根路径）

<link href="/css/style.css" rel="stylesheet">

⚠️ 注意：此处的 / 表示应用上下文根（如 http://localhost:8080/），不是服务器文件系统根目录。Spring Boot 默认启用 static 目录为静态资源根，无需额外配置。

✅ 完整可运行示例

目录结构（标准 Maven 结构）：

src/main/
├── resources/
│   └── application.properties
└── webapp/
    └── index.jsp   ← 你的 JSP 页面
src/main/resources/static/
    └── css/
        └── style.css

index.jsp（修正后）：



    <title>Home Page</title><!-- ✅ 正确：从上下文根开始定位 --><link href="/css/style.css" rel="stylesheet"><h1>Welcome to My App</h1>

此时访问 http://localhost:8080/index.jsp，浏览器将正确请求 http://localhost:8080/css/style.css，并由 Spring Boot 的 ResourceHttpRequestHandler 自动匹配 static/css/style.css。

? 常见误区与避坑指南

❌ href="css/style.css" → 解析为 http://host:port/index.jsp/css/style.css（错误子路径）
❌ href="../../resources/static/css/style.css" → 违反 Spring Boot 静态资源映射约定，且 resources/ 目录不对外暴露（仅 static/, public/, templates/ 等特定目录受支持）
❌ 在 application.properties 中错误配置 spring.web.resources.static-locations 后未重启服务

? 进阶建议（推荐生产环境使用）

优先使用 Thymeleaf 替代原生 JSP（更安全、更符合 Spring 生态）：
```
<link th:href="@{/css/style.css}" rel="stylesheet">
```
Thymeleaf 会自动处理上下文路径（如部署在 /myapp 下时，生成 /myapp/css/style.css）。
自定义静态资源路径（可选）：
在 application.properties 中显式声明（增强可读性）：
```
spring.web.resources.static-locations=classpath:/static/,classpath:/public/
```
验证资源是否可达：直接在浏览器访问 http://localhost:8080/css/style.css —— 若返回 CSS 内容，说明路径配置无误；若 404，请检查文件是否真正在 src/main/resources/static/css/ 下，且已重新编译打包。

✅ 总结

Tomcat（在 Spring Boot 中）找不到 CSS 文件，本质是前端路径与后端资源映射不匹配。牢记：
? 所有静态资源放在 src/main/resources/static/（或 src/main/resources/public/）下；
? HTML/JSP 中统一使用 href="/xxx" 的绝对路径写法；
? 避免硬编码相对路径或尝试穿透 resources/ 目录；
? 利用 @ 表达式（Thymeleaf）或 Spring MVC 的 ResourceHandler 机制保障路径健壮性。

遵循以上原则，即可彻底解决静态资源 404 问题，让样式、脚本与图片稳定加载。