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
– Dave Pateral, Commented Sep 25, 2017 at 9:46
do you use spring-security? If yes this could help. resource 1, resource 2 — Patrick
– Patrick, Commented Sep 25, 2017 at 11:50
@DavePateral ... and thats what using /assets/ should fix, right? so just add forward slash in the beginning of your url — eis
– eis, Commented Sep 25, 2017 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
– Dave Pateral, Commented Sep 26, 2017 at 2:26

wafaa hegazy · Accepted Answer · 2017-09-25 09:00:35Z

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, 2017 at 9:00

answered Sep 25, 2017 at 8:51

wafaa hegazy

976 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Pateral Over a year ago

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.

wafaa hegazy Over a year ago

do you mean that you access this page through a hyperlink ?

Dave Pateral Over a year ago

Not a hyperlink, just type url in the browser.

eis · Accepted Answer · 2018-04-04 06:09:45Z

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 4, 2018 at 6:09

eis

53.7k14 gold badges159 silver badges206 bronze badges

Comments

Dave Pateral · Accepted Answer · 2018-04-04 03:21:50Z

0

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.

edited Apr 4, 2018 at 3:21

answered Sep 27, 2017 at 9:19

Dave Pateral

1,4651 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related