CODEWITHSUNDEEP
springspring-bootspring-mvcthymeleaf
Fiach ONeill
Fiach ONeill

Reputation: 155

Spring Boot not loading static files (CSS and JS)

So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.

I have already tried changing the path (as suggested in other similar questions) to something like @{css/styles.css} instead of @{/css/styles.css} but that did not work.

Does anyone know if I'm missing something here?

Below is the HTML file:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
    <div class="content">
        <header>Login Form</header>
        <form action="#">
            <div class="field">
                <span class="fa fa-user"></span>
                <input type="text" required placeholder="Email or Phone">
            </div>
            <div class="field space">
                <span class="fa fa-lock"></span>
                <input type="password" class="pass-key" required placeholder="Password">
                <span class="show">SHOW</span>
            </div>
            <div class="pass">
                <a href="#">Forgot Password?</a>
            </div>
            <div class="field">
                <input type="submit" value="LOGIN">
            </div>
        </form>
        <div class="login">Or login with</div>
        <div class="links">
            <div class="facebook">
                <i class="fab fa-facebook-f"><span>Facebook</span></i>
            </div>
            <div class="instagram">
                <i class="fab fa-instagram"><span>Instagram</span></i>
            </div>
        </div>
        <div class="signup">Don't have account?
            <a href="#">Signup Now</a>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/loginscript.js}"></script>
</body>

Upvotes: 0

Views: 2407

Answers (3)

Fiach ONeill
Fiach ONeill

Reputation: 155

This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="@{../static/css/styles.css}". Thanks to everyone who answered!

Upvotes: 1

Chandra Kant
Chandra Kant

Reputation: 207

Add this in your head tag:

<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="@{/styles.css}">

Note: Above code will only work if styles.css present in below path:

|--resources
    |--static
        |--css
            |--styles.css

Upvotes: 1

Marc Collin
Marc Collin

Reputation: 499

where is your css folder?

css, js should be in static folder

src
   main
       java
       resources
                static
                      css
                      i18n
                      img
                      js
                templates

Upvotes: 1

Related Questions