Spring Boot登录页内嵌CSS背景图不加载及同步加载优化求助

问题原因 #

• Spring Boot默认将resources/static目录作为静态资源根目录，该目录下的资源对外暴露的访问路径不需要携带static前缀，你在HTML内写的static/imgs/backgroundImage.jpg属于项目本地磁盘的存储路径，不是浏览器可访问的对外路径，自然无法加载到资源。
• 样式中相对路径的基准规则：外部CSS文件内的相对路径是相对于CSS文件本身的存储位置，而HTML文件内style标签的相对路径是相对于当前页面的访问地址（你当前页面访问地址为http://localhost:8080/login，相对路径基准为服务根路径http://localhost:8080/）。

修复方案 #

直接修改你在login.html中新增的style标签内容，把背景图路径改为以斜杠开头的绝对路径即可：

<style>
    body {
            background: url("/imgs/backgroundImage.jpg");
            background-size: cover;
    }
</style>

这个路径会直接从服务根路径开始匹配静态资源，会准确命中resources/static/imgs/backgroundImage.jpg文件，不需要依赖相对路径的基准规则，兼容性更好。

如果你的项目集成了Thymeleaf模板，也可以使用Thymeleaf的资源路径写法，适配部署后可能存在的上下文路径变化，更加稳妥：

<style th:inline="css">
    body {
            background: url([[@{/imgs/backgroundImage.jpg}]]);
            background-size: cover;
    }
</style>

内容的提问来源于stack exchange，提问作者Luk