Thymeleaf: can't load js and css when direct access the page

Question

Updated: to describe the question more clearly

I create a web applicaiton with spring boot and thymeleaf, everything works fine if I open the login page, then login, then head for the management module or reports module sequently.

The proleam occurs when I type the url locahost:8080/send/kf/index(needs to authenticate, but I have open access to all in customized filter) in the browser, the page loads without js and css. In debug mode, I saw /send/kf was unexpectly put into the path like the following. I can get the resource if I access localhost:8080/assets/avatars/avatar.png.

The following is the folder structure I put my static resources. How could /send/kf automatically added into the url, please help me solve this problem. Thanks!

No, the right path should be `/assets/css/...`, but `/send/kf` is automatically put into the url. — Dave Pateral, Sep 25 '17 at 09:46
do you use spring-security? If yes this could help. [resource 1](https://stackoverflow.com/a/24920752/3493036), [resource 2](https://stackoverflow.com/a/22829754/3493036) — Patrick, Sep 25 '17 at 11:50
@DavePateral ... and thats what using `/assets/` should fix, right? so just add forward slash in the beginning of your url — eis, Sep 25 '17 at 12:05
@Patrick Yse, I use spring security, thanks for your guides, but the problem is not about that. The resources can be loaded if I open the login page, but can't be loaded when I type the url(`/send/kf/index`) in the browser, wihch needs to load these resources, but `/send/kf` is unexpectly put into the path — Dave Pateral, Sep 26 '17 at 02:26
In my recent practice, I found add a forward slash works for me, sorry for having not discoverd it earlier. @eis — Dave Pateral, Apr 04 '18 at 03:26
@DavePateral yes, that's what I suggested as a very first comment :) added it as an answer now. — eis, Apr 04 '18 at 06:07

wafaa hegazy · Answer 1 · 2017-09-25T09:00:35.590

1

you can use spring.resources.static-locations in your application.properties file

spring.resources.static-locations=classpath:/resources/css/

spring.mvc.static-path-pattern=/resources/**

this is taken form documentation

Note:Static resources, like JavaScript or CSS, can easily be served from your Spring Boot application just be dropping them into the right place in the source code. By default Spring Boot serves static content from resources in the classpath at "/static" (or "/public")

edited Sep 25 '17 at 09:00

answered Sep 25 '17 at 08:51

wafaa hegazy

97
6

This is to relocate the address of static resources, right? My js and css is under `resouces/static/assets`, it can be loaded if I log into the site, but fails to load when directly hitting an inner url. – Dave Pateral Sep 25 '17 at 10:02
do you mean that you access this page through a hyperlink ? – wafaa hegazy Sep 25 '17 at 10:51
Not a hyperlink, just type url in the browser. – Dave Pateral Sep 26 '17 at 01:39

Dave Pateral · Answer 2 · 2018-04-04T03:21:50.737

I find a solution for this question. I don't know how /send/kf is put into the url for the static resources, but I think if I put the controller mapping under the root path, this problem should avoid. As I think, the url is correct and resources can load successfully.

@Controller
public class ManualMessageController {

    @Autowired
    private MsgTemplateRepository msgTemplateRepository;

    @RequestMapping("/manualMsg")
    public String manualMsg(Model model){
        model.addAttribute("msgTemplateList", msgTemplateRepository.findByStatus(1));
        return "manualMessage";
    }
}

updated:

The right solution is to use absolute path rather than relative path in the project. So change assets/css to /assets/css works.

score 0 · Accepted Answer · answered Apr 04 '18 at 06:09

0

Using /assets/ instead of assets/ fixes the issue, as otherwise it's a relative url that's supposed to get added to the end of existing url.

answered Apr 04 '18 at 06:09

eis

51,991
13
150
199

Thymeleaf: can't load js and css when direct access the page

3 Answers3