Springboot Thymeleaf unable to find static resources when using multilevel path in controller

Question

I'm using Springboot mvc with thymeleaf. I have a typical project structure. It is able to load static resources when I'm mapping a simple path like http://<context-url>/anything but it is not working when I'm using a multilevel path like http://<context-url>/controllerpath/anything.

Endpoint sample is below: it is working

@GetMapping(path="/list")
    public ModelAndView getAdminList() {

        List<Admin> adminList = adminService.getAdminList();
        System.out.println(adminList);

        ModelAndView mav = new ModelAndView("home/main");
        mav.addObject("name", "Test");
        mav.addObject("list", adminList);
        return mav;
    }

but when I try to add something in @Getmapping path like

@GetMapping(path="/admin/list")
    public ModelAndView getAdminList() {

        List<Admin> adminList = adminService.getAdminList();
        System.out.println(adminList);

        ModelAndView mav = new ModelAndView("home/main");
        mav.addObject("name", "Test");
        mav.addObject("list", adminList);
        return mav;
    }

it loads the template but not static resources like js and css.

I tried to add ../ in template like

<link href="../dist/css/style.min.css" rel="stylesheet">
<script src="../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>

then it works, but I dont want to use ../ in my template. Do we have any other configuration that can solve this issue. TIA.

Answer 1

The resources you link in your template should not be relative to the current path. When you don't start your resources src/href path with a / they turn out to be relative URLs. Hence you need to specify the src/href path from the root starting with /.

So in your case, it would be: /dist/css/style.min.css and /assets/libs/<file names>.

Thymeleaf provides a handy feature to link the URLs in your application via the @{}. Using @{} will automatically prepend the context path (if there is any) to all the URLs. As mentioned in the comment by @Kedar so you would eventually end up with the following:

<link th:href="@{/dist/css/style.min.css}" rel="stylesheet">
<script th:src="@{/assets/libs/popper.js/dist/umd/popper.min.js}"></script>
<script th:src="@{/assets/libs/bootstrap/dist/js/bootstrap.min.js}"></script>