在部署的 webapp 中引用一个 css 文件

Question

我在 localhost:8080/Project 部署了一个 Web 应用程序，项目是上下文名称。 Web 应用程序正确地将用户重定向到 index.jsp。

但是找不到index.jsp中的css文件（错误404）。

Index.jsp 包含此引用：

<html lang="en">
<head>
    <link href="../css/style.css" rel="stylesheet">
</head>
</html>

我的项目在WEB-INF文件夹中的结构如下：

WEB-INF/views/index.jsp
WEB-INF/css/style.css

我也尝试通过 url localhost:8080/Project/css/style.css 直接调用 css 文件，但这也不起作用。

我按照建议将 css 文件夹向上移动了一层（与 WEB-INF 在同一层）。问题仍然存在。这个@Controller中是否必须排除以/css开头的url？或者也许我走错了路...

@Controller
@RequestMapping("/")
public class IndexController {

    @RequestMapping(method = RequestMethod.GET)
    public String sayHello(ModelMap model) {
        return "index";
    }
}

Answer 1

浏览器加载 localhost:8080/Project，然后相对于 URL 继续加载 ../css/style.css，因此尝试加载 localhost:8080/css/style.css，这显然不起作用。

您不应将 CSS、JS 和图像等网络资源放在 /WEB-INF 下，因为无法从该位置访问它们。而是使用类似

的东西

WEB-INF/views/index.jsp
css/style.css

并在 JSP 中写入

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

Answer 2

WEB-INF 是私有文件夹，URL 无法访问，但可以通过 servlet Java 代码访问。您应该将 html,css,js 放在与 WEB-INF 文件夹所在的同一文件夹级别。也就是说，将它们放在与 WEB-INF 相邻的位置，而不是放在里面。

所以一个典型的 webapp 文件夹看起来像

*Name of webapp*
  |-js
     |-index.js
  |-css
     |-style.css
  |-index.html
  |-WEB-INF
     |-private files...

然后尝试

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

在部署的 webapp 中引用一个 css 文件

reference a css file in deployed webapp

java

css

jsp

spring-mvc

web-inf