html - CSS 和图像未在 Spring Boot 的 index.html 中加载

问题描述

我的文件是这样组织的：

index.html通过 Intellij 的午餐 url ( localhost:63342/../static/index.html)访问时完美呈现

但是当我运行我的 Spring Boot 应用程序并访问http://localhost:8080/时，我index.html无法加载 CSS 文件和图像。

我没有触及任何其他配置。我所有的控制器都是@RestControllers。我确实已mustache作为依赖项安装，但没有在任何地方使用它。

index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Project</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <link rel="stylesheet" type="text/css" href="css/body.css"/>
        <link rel="stylesheet" type="text/css" href="css/header.css"/>
        <link rel="stylesheet" type="text/css" href="css/section_one.css"/>
        <link rel="stylesheet" type="text/css" href="css/section_two.css"/>
    </head>
    <body class="body-inner-wrap">
        <header>
            <div id="header-wrapper">

                <div id="title" class="main_title">
                    <h1>Project</h1>
                </div>

                <div id="links">
                    <ul>
                        <li>
                            <a href="#Join"><b>Join</b></a>
                        </li>
                        <li>
                            <a href="#Howto"><b>How-To</b></a>
                        </li>
                        <li>
                            <a href="#About"><b>About</b></a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div id="content-wrapper">
            <div id="intro-box">
                <h2>A simple and fast platform to upload audio files and reach out to your listeners via
                    our no non-nonsense mobile apps.</h2>

                <h5>This is work in progress and will be live soon as a closed beta.</h5>
            </div>

            <div id="login-box">
                <div class="login-form">
                    <form method="post" action="">
                        <p><input type="text" name="Username" value="" required placeholder="Username"></p>
                        <p><input type="password" name="password" value="" required placeholder="Password"></p>
                        <p><input type="submit" name="Login" value="Login"></p>
                    </form>
                </div>
            </div>
        </div>

        <br><br>

        <div id="device-mock-bg">
            <div class="device-mock">
                <img src="images/android-device-mock.svg"
                     alt="Android app mock up"
                     height="700"
                     width="300" />
            </div>
        </div>
    </body>
</html>

另外，检查浏览器的控制台我发现了这些 -

The resource from “http://localhost:8080/css/style.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff)

Cookie “JSESSIONID” will be soon treated as cross-site cookie against “http://localhost:8080/css/style.css” because the scheme does not match.

请问有什么帮助吗？

标签： htmlcssspringspring-boot

html - CSS 和图像未在 Spring Boot 的 index.html 中加载

问题描述

解决方案

推荐阅读