点击更新按钮后更新页面css/js/img资源无法加载求助

核心原因 #

点击Edit按钮后进入的URL是带路径参数的层级结构（例如/admin-update-announcement/1），如果页面中引用静态资源时使用相对路径，浏览器会基于当前URL的路径去请求资源（比如错误请求/admin-update-announcement/css/style.css），而实际静态资源存放在应用根路径下，导致路径匹配失败。

解决方案 #

1. 确认静态资源存放位置 #

确保css、js、img等静态资源放在Spring Boot默认的静态资源目录：
src/main/resources/static/
示例目录结构：

src/main/resources/
├── static/
│   ├── css/
│   │   └── bootstrap.min.css
│   ├── js/
│   │   └── main.js
│   └── img/
│       └── logo.png
└── templates/
    └── view/
        └── html/
            └── admin/
                ├── announcement.html
                └── update-announcement.html

2. 使用Thymeleaf绝对路径语法引用资源 #

在所有页面（包括update-announcement.html以及它继承的布局模板）中，用Thymeleaf的@{}语法生成基于应用根路径的绝对URL，替换原来的相对路径：

• CSS引用示例：

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

• JS引用示例：

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

• 图片引用示例：

<img th:src="@{/img/logo.png}" alt="系统Logo">

3. 检查模板布局的资源引用 #

如果update-announcement.html是通过Thymeleaf的布局继承（比如th:replace或th:include）引入头部导航/资源引用的，务必确保布局文件中的资源引用也使用@{}语法，避免布局中的相对路径导致资源加载失败。

验证方法 #

打开浏览器开发者工具（F12），切换到Network标签，刷新update-announcement页面，查看静态资源的请求URL：

• 如果请求URL是http://localhost:8080/css/bootstrap.min.css（根路径开头），说明路径正确；
• 如果是http://localhost:8080/admin-update-announcement/css/bootstrap.min.css，说明还是用了相对路径，需要修改为@{/css/bootstrap.min.css}。

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