使用Thymeleaf时HTML背景图片无法显示的问题求助

• 检查静态资源的服务器映射配置
  如果你用的是Spring Boot这类后端框架，默认会把src/main/resources/static作为静态资源根目录。这时候HTML里的背景图路径应该写成/chess-background.jpeg，而不是/static/chess-background.jpeg——因为框架已经把static目录映射成了服务器的静态资源根路径。
  要是你自定义了静态资源映射规则，比如通过WebMvcConfigurer配置了/static/**指向classpath:/static/，那HTML里的/static/chess-background.jpeg才会生效，得保证路径和配置对应上。示例配置代码：

  @Configuration
  public class WebConfig implements WebMvcConfigurer {
      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
          registry.addResourceHandler("/static/**")
                  .addResourceLocations("classpath:/static/");
      }
  }
  

• 确认图片文件的实际存放位置
  虽然IDE里hover路径能跳转，但要确保图片确实放在服务器能识别的静态资源目录里。比如Spring Boot项目，必须把图片放在src/main/resources/static下，而不是项目根目录的static或者其他非资源目录，否则服务器启动后找不到文件。

• 查看浏览器控制台的错误提示
  打开Chrome开发者工具（按F12），切换到「Network」标签，刷新页面后看背景图的请求状态：

  • 要是显示404，说明路径写错了，按上面的映射规则调整路径；
  • 要是显示403，可能是服务器权限配置问题，检查静态资源的访问权限。

• 区分本地文件和服务器的路径解析逻辑
  直接打开HTML文件时，浏览器从本地文件系统读取，/static/...会被解析成你本地项目的根目录；但通过服务器运行时，/代表服务器的根路径，两者解析逻辑完全不同。要统一用服务器能识别的路径：要么用符合服务器映射规则的根路径，要么用相对路径（比如./static/chess-background.jpeg，但要注意HTML文件本身的位置）。

• 强制清理浏览器缓存
  有时候浏览器会缓存旧的资源，导致新图片加载失败。按Ctrl+Shift+R强制刷新页面，或者在开发者工具的「Network」标签里勾选「Disable cache」后再刷新。

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