Spring Boot thymeleaf unable to load css resource

Question

I can see my bootstrap template using thymeleaf with spring boot.

When I request http://localhost:8080/student bootstrap resources work good, but when I request including some path variable like http://localhost:8080/student/3 bootstrap can't be uploaded. I'm getting this error from the browser Request Method:GET Status Code:400. It tries to request bootstrap file like that http://localhost:8080/student/bootstrap.css.

I don't think I have any problems with declaring bootstrap files' path because other pages work fine. And my paths are from guide as resources/static/bootstrap.css I'm not using WebMvcConfig and I'm using default spring security.

@RequestMapping( value = "/student/{id}", method = RequestMethod.GET)
public String izinEkle(Model model, @PathVariable int id) {


    studentService.getStudentlById(id);
    Izin izin = new Izin();
    model.addAttribute("izin",izin);
    return "izinGiris";
}

--

<head lang="en">

<title>HolyDayTracker</title>
<link href="../static/bootstrap.css" th:href="@{bootstrap.css}" rel="stylesheet" media="screen">
<link href="../static/style.css" th:href="@{style.css}" rel="stylesheet">
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js   th:src="@{../webjars/jquery/2.1.4/jquery.min.js}"></script>

It seems like program is trying get path variable id as bootstrap.css. I think I have some logic failure on the request paths with variables. I'm pretty confused. Any help would be appreciated. Thanks. — memoricab
– memoricab, Commented Feb 22, 2017 at 21:46
The issue here is that bootstrap.css will be a relative URL, and /student and /student/3 are on different levels, so they will relatively point to a different location for bootstrap.css. There are many solutions for this, most of them can be found in the linked question. The most common solutions are to use an absolute URL (as shown by @shi) or by setting a <base> tag in you <head> section so the base URL is the same for all paths. — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Feb 23, 2017 at 7:58

Monzurul Shimul · Accepted Answer · 2017-02-23 01:37:46Z

4

Try adding a leading slash / in your thymeleaf href attr value. And you do not need additional href attributes, only th:href will do.

<link th:href="@{/bootstrap.css}" rel="stylesheet" media="screen">
<link th:href="@{/style.css}" rel="stylesheet">

answered Feb 23, 2017 at 1:37

Monzurul Shimul

8,4262 gold badges31 silver badges45 bronze badges

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

1 Comment

memoricab Over a year ago

Thank you very much. I think I missed an important point about thymeleaf references. Didn't expect anything like this solution, anyway saved me out. I I appreciate. But a point that if I remove html href I can't auto-complete bootstrap classes. Probably it's reference for the Ide.

Collectives™ on Stack Overflow

Spring Boot thymeleaf unable to load css resource

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related