CSS File not loading on different url-CodePudding

I have two endpoints each of them is returning the "index.html" view.

http://localhost:8080/ this URL shows the index file and CSS is working as well. image
http://localhost:8080/product/1 this URL only shows the index file but CSS is not loading. image

MainController.java

package com.example.temporary.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
    @RequestMapping("/")
    public String index() {
        return "index";
    } 

    @RequestMapping("/product/1")
    public String process() {
        return "index";
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{css/index.css}">
    <title>Document</title>
</head>
<body>
    <h1>Index Page</h1>

    <a th:href="@{/product/1}">Click Me!</a>
</body>
</html>

index.css

* {
    box-sizing: border-box;
}

body {
    background-color: black;
    color: white;
}

File Structure image

CodePudding user response：

try to include css as below in html

 <link rel="stylesheet" th:href="@{/css/index.css}">

instead of css/index.css it should be /css/index.css