jsp 页面中使用相对路径引用图片时，浏览器会依据当前请求 url 解析路径；若登录重定向导致实际访问 url 与资源物理路径不匹配，将引发图片 404 或意外跳转至图片文件本身。本文详解根本原因与标准化解决方案。
jsp 页面中使用相对路径引用图片时，浏览器会依据当前请求 url 解析路径；若登录重定向导致实际访问 url 与资源物理路径不匹配，将引发图片 404 或意外跳转至图片文件本身。本文详解根本原因与标准化解决方案。
在基于容器认证（如 j_security_check）的 Tomcat 应用中，常见现象是：用户首次访问受保护资源（如 /app/dashboard.jsp）时被重定向至 /login.jsp，但该页面中的 <img src="images/logo.png"> 或 CSS 背景图（background: url(images/bg.png)）无法加载，甚至点击登录后浏览器直接跳转显示 bg.png——这并非缓存问题，而是URL 解析上下文错位所致。
根本原因：相对路径依赖请求 URI，而非文件物理位置
JSP 是服务端模板，但 <img>、<link>、<script> 等标签的 src/href 属性由浏览器在客户端解析，其基准是当前页面的完整 URL（即浏览器地址栏显示的路径），而非 JSP 文件在 Web 应用中的目录结构。
例如：
- 物理路径：/WEB-INF/login.jsp（不可直接访问），通过 web.xml 配置为 login-page="/login.jsp"；
- 实际请求 URL：https://example.com/app/j_security_check → 重定向至 https://example.com/app/login.jsp；
- 此时浏览器认为当前“上下文”是 /app/，因此 <img src="images/logo.png"> 会被解析为 https://example.com/app/images/logo.png；
- 但图片真实路径可能是 /app/resources/images/logo.png 或 /images/logo.png —— 若目录结构不匹配，即返回 404。
更危险的是：当某次请求因路径错误恰好命中一张 PNG 文件（如 https://example.com/app/images/bg.png 返回 200），而该响应未设置 Content-Type: image/png 或缺少 Content-Disposition，部分浏览器（尤其旧版 IE/Chrome）可能将其当作可导航资源，导致整个页面“跳转”到该图片。
✅ 正确解决方案：统一使用上下文根路径（Context Path）
始终通过 ${pageContext.request.contextPath} 构建绝对路径，确保资源 URL 与应用部署路径解耦：
<!-- 推荐：显式基于 context path -->
<img src="${pageContext.request.contextPath}/resources/images/logo.png" alt="Logo">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
<div style="background: url('${pageContext.request.contextPath}/resources/images/bg.png');"></div>若项目结构为：
MyApp/ ├── resources/ │ ├── images/ │ │ ├── logo.png │ │ └── bg.png │ └── css/ │ └── style.css ├── login.jsp └── WEB-INF/
则上述写法生成的 URL 恒为 https://example.com/MyApp/resources/images/logo.png（无论用户是通过 /MyApp/、/MyApp/login.jsp 还是重定向后的 /MyApp/j_security_check 访问）。
? 补充最佳实践
- 避免 ../ 回溯路径：它极易因重定向层级变化而失效；
- 静态资源建议统一存放于 webapp/ 直接子目录（如 /images/, /css/），而非 WEB-INF/（该目录下资源无法被客户端直接访问）；
- 验证资源可访问性：直接在浏览器中输入生成的完整图片 URL（如 https://localhost:8080/MyApp/resources/images/logo.png），确认返回 200 OK 及正确的 Content-Type；
- 启用 Tomcat 的资源缓存头（可选）：在 web.xml 中配置 <servlet> 的 default servlet，添加 <init-param> 启用 sendfile 和 cacheControl，提升二次加载性能。
总结
图片首次不显示、登录后跳转到 PNG 文件等“诡异行为”，本质是前端路径解析与服务端重定向机制冲突所致。放弃相对路径幻想，拥抱 ${pageContext.request.contextPath}，是 JSP 静态资源引用的黄金法则。 此方案兼容 WAR 包部署在任意上下文路径（如 /, /myapp, /v2），彻底规避环境迁移和安全重定向带来的路径陷阱。
