jsp 页面在浏览器缓存清空后首次访问时图片无法显示，常因相对路径解析错误导致资源请求失败或意外重定向；本文详解其根本原因、复现逻辑及可靠解决方案。
jsp 页面在浏览器缓存清空后首次访问时图片无法显示，常因相对路径解析错误导致资源请求失败或意外重定向；本文详解其根本原因、复现逻辑及可靠解决方案。
该问题本质是 URL 路径解析上下文错位 所致，而非图像格式、权限或 Tomcat 配置缺陷。当用户未登录时，容器通过 j_security_check 触发表单认证，此时请求被容器内部重定向至 /login.jsp —— 但该跳转并不改变浏览器地址栏中的原始 URL（例如用户直接访问 http://localhost:8080/myapp/，而实际渲染的是 login.jsp）。此时页面中所有相对路径（如 
或 background: url(images/bg.png)）将以原始请求 URL 为基准解析，而非以 login.jsp 所在路径为基准。
例如：
- 应用部署路径为 /myapp/；
- login.jsp 位于 WEB-INF/jsp/login.jsp（通常不直接可访问），但通过
- 若页面中写
，浏览器会尝试请求 http://localhost:8080/images/icon.png（即根路径下），而非正确的 http://localhost:8080/myapp/images/icon.png —— 导致 404，图片空白； - 更隐蔽的是：若恰好存在同名静态资源（如服务器根目录下有 bg.png），且容器配置了默认欢迎文件或通配符映射，就可能触发意外重定向（如跳转至 bg.png），这正是你观察到“登录成功后反而跳转到 PNG 文件”的原因。
✅ 正确做法：始终使用上下文路径（Context Path）构造绝对路径
推荐在 JSP 中采用以下方式引用静态资源：
<!-- 推荐：基于 contextPath 的绝对路径 -->
<img src="<%=%20ctx%20%>/images/logo.png" alt="Logo" style="max-width:90%"><link rel="stylesheet" href="<%=%20ctx%20%>/css/login.css"><!-- CSS 中 background 也需对应调整 --><style>
body { background: url('<%= ctx %>/images/bg-login.png') no-repeat center; }
</style>
或更现代、简洁的 EL 表达式写法（需启用 EL）：
<img src="%24%7BpageContext.request.contextPath%7D/images/logo.png" alt="Logo">
⚠️ 注意事项：
- 避免使用 ../ 或纯相对路径（如 images/xxx.png），因其依赖当前请求 URL 结构，在容器重定向场景下极易失效；
- 确保静态资源（images/, css/, js/）放在 WebContent（或 src/main/webapp）根目录下，不可置于 WEB-INF/ 内（该目录下资源受容器保护，无法被客户端直接访问）；
- 若使用前端构建工具（如 Webpack），建议配合 contextPath 注入机制，在 JS/CSS 中动态拼接资源路径；
- 开发调试时，务必在 Chrome DevTools 的 Network 标签页中检查图片请求的实际 URL 和响应状态码（常见为 404 或 302），这是定位路径问题最直接的依据。
总结：JSP 中静态资源加载失败的“首次不显示”现象，90% 以上源于路径解析脱离了应用上下文。通过显式使用 request.getContextPath() 构建资源 URL，可彻底规避容器重定向带来的路径歧义，确保无论用户从何入口访问、是否已登录，资源均能稳定加载。
