图像、js 和 css 资源不适用于 jsp 页面答案

【问题标题】：image, js and css resources aren't working on jsp pages图像、js 和 css 资源不适用于 jsp 页面
【发布时间】：2014-09-27 08:36:00
【问题描述】：

技术人员-- 这是一个简单的 servlet/jsp/tomcat 应用程序。我想添加一个样式表、图像和一些 java 脚本文件。我正在使用日食（开普勒）。部署到 PaaS、Cloudbees 服务器。

我已将 js 库添加到项目中——它在 eclipse 项目中显示为 JavaScript 资源下的资源库。实际文件显示在项目的 js 目录中。

我已将 src\main\webapp\WEB-INF 下的样式表添加为 style.css

这是我的 jsp 页面中链接的样子

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
 pageEncoding="ISO-8859-1"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="WEB-INF/style.css">
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/georgia.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>  
<title>Water Conservation and Reservoir Data Depot</title>
</head>

图片在我的jsp页面中引用如下：

  <img src="images/img_1.gif" alt="" width="89" height="78" class="floated" />

我以为我正确设置了 js 和 css 文件。我不确定图像文件，但由于它们都没有显示，显然我没有得到任何正确！ :(

【问题讨论】：

你可能不应该使用WEB-INF； HTML 页面被发送到客户端，而不是在服务器上自动重写。您还应该使用绝对路径而不是相对路径。弄清楚如何在浏览器中手动加载资源，然后使交付的 HTML 与这些 URL 匹配。
@chrylis，因为我正在部署到 PaaS，所以我对相对路径/绝对路径实际上可能是什么感到有些困惑。对于图像，有没有办法将它们打包并在 html/anchor 标签中引用它们？今晚我会满足于任何成功！ :)
您说的是js/ 和images/，这是相对于页面位置的。如果您的页面位于目录中，请使用/js/ 确保您不会感到困惑。
叹息。这是一次勇敢的尝试。然后我尝试了 ../js/ 和 ../images - 结果相同：sfinterfacetomcat8.metro-pojo.cloudbees.net/…
先弄清楚如何在浏览器中直接加载图像。一般来说，首先在本地运行会比通过 CloudBees 更容易（尤其是因为 CloudBees 正在关闭他们的 PaaS）。

标签： java html eclipse jsp cloudbees

【解决方案1】：

不要使用相对 URL（“images/img_1.gif”），而是使用绝对 URL（“/images/img_1.gif”）
不要将静态资源放在WEB-INF 下。此文件夹本质上从不直接暴露给 Web 请求，只能通过 servlet 映射定义访问。

【讨论】：

如果我能得到一个绝对的工作（或一个相对的工作）！ :-\ 我确实强制css至少用这一行加载：。我即将为 *.js 脚本做类似的事情。 Cloudbees 部署在 Tomcat 8 服务器上——没有适用于 Kepler 的适配器——所以我不知道这些文件实际加载的位置，以弄清楚什么是相对的。 10 分钟的努力令人沮丧。
顺便说一句，我会将样式表从 WEB-INF 移到 /resources/images。树上哪里最好？

【解决方案2】：

已解决：

我通过opssys移动了webapp目录下的images目录、style.css和js目录；用于 jscript 和 css 的包含文件；获取图像参考的上下文。

【讨论】：