thymeleaf正在基于其余URI加载静态资源

Question

I'm using thymeleaf as a template engine to my spring boot project.

My directory structure is that:

src/main/
|- java
    | - UserAdministrationController.java
|- resources
    | - static
        | - admin
             | - css
                 | - template.css
             | - js
                 | - template.js
    | - templates
        |- incs
            |- inc_form_create_user.html
        |- users.html

My controller is annotated with:

@Controller
@RequestMapping("/administration/users")

And I have a method to get the users page:

@RequestMapping("")
    public ModelAndView getUsersPage() {
        return new ModelAndView("admin/users");
    }

A method to create users:

@RequestMapping(value = "/create", method = RequestMethod.POST)
    public String handleUserCreateForm(@Valid @ModelAttribute("form") UserDTO form, BindingResult bindingResult) {
        if (bindingResult.hasErrors()) {
            return getUsersPage().getViewName();
        }
        try {
            userService.create(form);
        } catch (DataIntegrityViolationException e) {
            bindingResult.reject("email.exists", "Email already exists");
            return getUsersPage().getViewName();
        }
        return "redirect:/administration/users";
    }

And a method that when it's called, it add a user in the model (to fill a form):

@RequestMapping("/{id}/edit")
    public ModelAndView getEditPage(@PathVariable("id") long id) {
        ModelAndView model = new ModelAndView("admin/users");

        model.addObject("userToEdit", userService.getUserById(id));

        return model;

    }

I'm using the same page, using includes to deal with that:

<div th:if="${userToEdit == null}" class="panel panel-default" th:include="admin/incs/inc_form_create_user :: createUserForm" ></div>
<div th:if="${userToEdit != null}" class="panel panel-default" th:include="admin/incs/inc_form_create_user :: editUserForm" ></div>

My CSS files been imported:

<link th:href="@{../../admin/css/template.css}" rel="stylesheet" />

when I go to the user.html, it works as well. The problem, is when I go call the edit method that have a diferent URI.

When I call the create the url seems like this:

http://localhost:8080/administration/users

When I call the edit:

http://localhost:8080/administration/users/10/edit

the import in both cases:

../../admin/css/template.css

But in the edit case, the browse console show me this:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/administration/admin/css/template.css

Answer 1

You can use absolute instead of relative paths, for example /admin/css/template.css instead of ../../admin/css/template.css . This may or may not work depending on your specific resource resolver configurations.