如何在 thymeleaf 中加载静态资源-解网

问：

在spring-boot应用程序中具有以下布局：resources

$ tree -L 2 resources/
resources/
├── application.properties
├── static
│   ├── css
│   ├── img
│   ├── js
│   ├── scss
│   └── vendor
└── templates
    └── login.html

登录.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>SB Admin 2 - Login</title>

  <!-- Custom fonts for this template-->
  <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
  <link
    href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
    rel="stylesheet">

  <!-- Custom styles for this template-->
  <link th:href="@{/css/sb-admin-2.min.css}" rel="stylesheet">

</head>

<body class="bg-gradient-primary">

  <div class="container">

    <!-- Outer Row -->
    <div class="row justify-content-center">

      <div class="col-xl-10 col-lg-12 col-md-9">

        <div class="card o-hidden border-0 shadow-lg my-5">
          <div class="card-body p-0">
            <!-- Nested Row within Card Body -->
            <div class="row">
              <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
              <div class="col-lg-6">
                <div class="p-5">
                  <div class="text-center">
                    <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
                  </div>
                  <form class="user">
                    <div class="form-group">
                      <input type="email" class="form-control form-control-user" id="exampleInputEmail"
                        aria-describedby="emailHelp" placeholder="Enter Email Address...">
                    </div>
                    <div class="form-group">
                      <input type="password" class="form-control form-control-user" id="exampleInputPassword"
                        placeholder="Password">
                    </div>
                    <div class="form-group">
                      <div class="custom-control custom-checkbox small">
                        <input type="checkbox" class="custom-control-input" id="customCheck">
                        <label class="custom-control-label" for="customCheck">Remember
                          Me</label>
                      </div>
                    </div>
                    <a href="index.html" class="btn btn-primary btn-user btn-block">
                      Login
                    </a>
                    <hr>
                    <a href="index.html" class="btn btn-google btn-user btn-block">
                      <i class="fab fa-google fa-fw"></i> Login with Google
                    </a>
                    <a href="index.html" class="btn btn-facebook btn-user btn-block">
                      <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
                    </a>
                  </form>
                  <hr>
                  <div class="text-center">
                    <a class="small" href="forgot-password.html">Forgot Password?</a>
                  </div>
                  <div class="text-center">
                    <a class="small" href="register.html">Create an Account!</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>

  <!-- Bootstrap core JavaScript-->
  <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
  <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

  <!-- Core plugin JavaScript-->
  <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

  <!-- Custom scripts for all pages-->
  <script th:src="@{/js/sb-admin-2.min.js}"></script>

</body>

</html>

这是从仪表板登录 https://startbootstrap.com/theme/sb-admin-2，运行 Spring Boot 应用程序时，CSS 不会加载。thymeleaf 知道文件夹是吗？这是 firefox 控制台：static/

Some cookies are misusing the recommended “SameSite“ attribute 6
Cookie “JSESSIONID” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite jquery.min.js
The resource from “http://localhost:8080/login” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
login
Loading failed for the <script> with source “http://localhost:8080/vendor/jquery/jquery.min.js”. login:91:45
The resource from “http://localhost:8080/login” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
3 login
Loading failed for the <script> with source “http://localhost:8080/vendor/bootstrap/js/bootstrap.bundle.min.js”. login:92:61
The resource from “http://localhost:8080/login” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
2 login
Loading failed for the <script> with source “http://localhost:8080/vendor/jquery-easing/jquery.easing.min.js”. login:95:59
The resource from “http://localhost:8080/login” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
login
Loading failed for the <script> with source “http://localhost:8080/js/sb-admin-2.min.js”. login:98:38

java html css spring-boot thymeleaf

1赞 Wim Deblauwe 10/31/2023

如果您使用 Spring Security，则需要允许 CSS 文件已经没有身份验证。请参阅 stackoverflow.com/questions/44304578/...

答： 暂无答案

上一个：在Spring Boot上运行的页面重新加载时CSS破损

下一个：Javalin websockets 标头

如何在 thymeleaf 中加载静态资源

how to load static resources in thymeleaf

评论