Ссылка на файл CSS в развернутом веб-приложении

Я развернул веб-приложение на localhost:8080/Project с Project, являющимся контекстным именем. Веб-приложение правильно перенаправляет пользователя на index.jsp.

Но файл css в этом index.jsp не найден (Ошибка 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

Я также пытался напрямую вызвать файл CSS через URL localhost:8080/Project/css/style.css но это не сработало.


Я переместил папку css на один уровень вверх (на том же уровне, что и WEB-INF), как было предложено. Проблема все еще сохраняется. Должен ли я исключить URL, начинающиеся с /css в этом @Controller? Или, может быть, я на неправильном пути...

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

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

2 ответа

Решение

Браузер загружен localhost:8080/Project а затем продолжает загружать ../css/style.css относительно этого URL, поэтому пытается загрузить 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">

WEB-INF - это личная папка, которая недоступна по URL, но доступна через Java-код сервлетов. Вы должны поместить ваши html,css,js в тот же уровень папки, в котором находится папка WEB-INF. То есть размещать их рядом с WEB-INF, а не внутри.

Таким образом, типичная папка веб-приложения будет выглядеть

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

Тогда попробуй

<link href="css/style.css" rel="stylesheet">
Другие вопросы по тегам