How to add static resources in spring with thymeleaf

user_9261031 0
Viewed 16208

I am new to Spring and I am trying to make a beautiful Web Application, and so far I set up everything, and if I run my page on the browser it shows as it is supposed. But if I run it with tomcat on port 8080 (I am using Intelijj) it doesn't load css and js files not even pictures.

I have literally searched this problem and open all the StackOverflow similar questions, I tried to write a configuration file, but it doesn't do anything, and I am uncertain about this approach because I have seen examples of people that did not write any configuration, but still they managed to make all their static resources load, and so on. Is it some secret application properties that need to write? Or there is a config code that has to write?

My resources folder looks like this:

-resources
    -static
        -CSS 
            -things.css
        -JS
            -datepicker.js
        -Images
            -many pictures
    -templates
        -Home.html and other pages

And the code that I used to refer to static-CSS-things.css is like this:

link href="../static/CSS/things.css" th:href="@{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"

I thought this would make my css file to load, but it doesn't. Same for the js and the pictures. Thank you!

thymeleaf resources static spring html
2 Answers

  1. Ensure your css and js files are in the following structure:

    src/main/resources/static/css/things.css

    src/main/resources/static/js/things.js

  2. Ensure you are calling your static resources from pages that are under the spring boot template folder, which is in src/main/resources/templates

  3. Always refer to your resources using the thymeleaf tag, because this way no matter the port you are running your application, it will always load properly.

src/main/resources/templates/example.html

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- CSS -->
    <link th:href="@{/css/things.css}" rel="stylesheet"></link>
    <!-- JS -->    
    <script th:src="@{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>

If still not working, try to use the inspect from Google Chrome, go to Network tab and check what error is returning from your css and js files, then comment here.

user_39424810
user_85342850
Related