Spring Boot项目HTML放入templates后Bootstrap静态资源加载失败

• 静态资源路径写法错误：Spring Boot默认将src/main/resources/static/下的资源直接映射到服务根路径，该目录下的文件访问时不需要带static前缀。你写的../static/xxx是本地文件系统的相对路径，Thymeleaf模板由后端渲染返回后，浏览器不会按照templates目录的文件结构寻址，这类路径会被解析为错误的请求地址，直接返回404。
• 组件属性和引入的Bootstrap版本不匹配：你引入的是Bootstrap 4.x版本的CDN资源，但轮播组件用了Bootstrap 5专属的data-bs-ride属性，导航栏折叠容器的id多写了#符号，就算资源加载完成，这两个组件也无法正常工作。
• CDN资源加载失败和模板迁移无关，出现这类情况优先检查本地网络对CDN域名的连通性即可。

• 替换所有本地静态资源的引用为Thymeleaf标准路径写法，不要硬编码相对路径：
  • 原CSS引用：

    <link rel="stylesheet" href="../static/css/style.css">
    

    替换为：

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

  • 原图片引用，例如：

    <img src="../static/images/music.jpg" class="d-block w-100" alt="Music events">
    

    替换为：

    <img th:src="@{/images/music.jpg}" class="d-block w-100" alt="Music events">
    

  • 原本地JS引用：

    <script src="../static/js/app.js"></script>
    

    替换为：

    <script th:src="@{/js/app.js}"></script>
    

  @{}是Thymeleaf内置的路径语法，会自动适配项目上下文路径，不会出现路径拼接错误。
• 修复组件属性错误：
  • 导航栏折叠容器的id去掉多余的#，将<div class="collapse navbar-collapse" id="#navbarResponsive">修改为<div class="collapse navbar-collapse" id="navbarResponsive">
  • 轮播组件的属性移除Bootstrap5专属的bs前缀，将<div id="slides" class="carousel slide" data-bs-ride="carousel">修改为<div id="slides" class="carousel slide" data-ride="carousel">
• 校验静态资源映射：启动项目后直接在浏览器访问http://localhost:你的服务端口/css/style.css，如果能正常返回文件内容，说明静态资源映射规则正常，路径修改后即可正常加载；如果返回401/403状态码，检查Spring Security配置，将/css/**、/js/**、/images/**路径加入放行列表，不要拦截静态资源请求。

启动服务访问页面，打开浏览器开发者工具的Network面板，确认所有CSS、JS、图片资源的请求状态码为200，再测试导航栏折叠按钮、轮播图自动切换功能即可。

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