Question

我在localhost:8080/Project部署了一个webapp，其中Project是上下文名称。 webapp正确地将用户重定向到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处于同一级别）。问题仍然存在。我是否必须在此/css中排除以@Controller开头的网址？或许我走错了路......

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

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

Answer 1

浏览器已加载localhost:8080/Project，然后继续相对于该网址加载../css/style.css，因此尝试加载显然无效的localhost:8080/css/style.css。

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

这样的东西

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文件

2 个答案: