Spring Boot+Thymeleaf无法导入JS文件及显示图片的问题求助

针对你遇到的静态资源加载404问题，按以下步骤排查解决：

1. 修正Thymeleaf路径写法 #

Spring Boot默认将src/main/resources/static作为静态资源的根目录，Thymeleaf的@{}语法中，静态资源路径需要以斜杠开头，否则会基于当前请求路径拼接导致错误。修改代码如下：

<script th:src="@{/js/imagetodata.js}"></script>
<img id="imageInput" th:src="@{/images/image.jpg}" alt="Image">

2. 确认资源文件的正确性 #

• 检查static/images/image.jpg和static/js/imagetodata.js是否真实存在，文件名（包括大小写）完全匹配——Linux/macOS环境下文件名大小写敏感，别出现Image.jpg和image.jpg这类差异。
• 确认文件没有被误放到其他目录（比如templates目录是Thymeleaf模板存放地，不是静态资源目录）。

3. 清理并重新构建项目 #

IDE缓存或构建残留可能导致资源未被正确打包：

• 使用Gradle执行清理和构建任务：

  ./gradlew clean build
  

• 重启Spring Boot应用，确保新构建的资源被加载。

4. 检查静态资源配置（若有自定义） #

如果你在application.properties或application.yml中修改过静态资源相关配置（比如spring.web.resources.static-locations），需确认配置正确，确保classpath:/static/被包含在内。默认配置无需修改，若有自定义，示例正确配置如下：

spring.web.resources.static-locations=classpath:/static/,classpath:/public/

5. 验证资源可直接访问 #

启动应用后，直接在浏览器访问资源URL，比如http://localhost:8080/js/imagetodata.js和http://localhost:8080/images/image.jpg：

• 如果能正常返回内容，说明资源本身没问题，问题出在Thymeleaf路径写法；
• 如果还是404，说明资源未被正确加载，回到步骤2和3重新排查。

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