如何用Thymeleaf在HTML页面添加图片？图片无法显示求助

一、直接访问静态资源的修正 #

你之前写的全物理路径是错误的，Spring Boot里src/main/resources/static是静态资源的默认根目录，前端访问时不需要写完整路径，直接用根路径映射即可：

• 原代码：

<img class="logo" th:src="@{src/main/resources/static/logo.png}" alt="Logo">

• 修正后：

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

Thymeleaf的@{}会自动处理项目上下文路径，直接指向static目录下的logo.png文件。

二、REST API方式的修正 #

原控制器用File读取物理路径的方式在打包运行时会失效，因为打包后资源是在classpath里，不是本地文件系统路径。换成ResourceLoader加载类路径资源更可靠：

• 修正后的控制器代码：

@RestController
@RequestMapping("/api/v1")
public class LogoController {
    private final ResourceLoader resourceLoader;

    public LogoController(ResourceLoader resourceLoader) {
        this.resourceLoader = resourceLoader;
    }

    @GetMapping(value = "/logo", produces = MediaType.IMAGE_PNG_VALUE)
    public ResponseEntity<Resource> getLogo() throws IOException {
        Resource resource = resourceLoader.getResource("classpath:static/logo.png");
        return ResponseEntity.ok()
                .contentLength(resource.contentLength())
                .body(resource);
    }
}

注意点：

• 如果你的图片是JPG格式，把produces改成MediaType.IMAGE_JPEG_VALUE，避免响应类型不匹配。
• 用ResponseEntity封装响应，确保响应头正确设置，浏览器能识别图片类型。

排查小技巧 #

打开浏览器F12开发者工具，查看Network标签里的图片请求：

• 若返回404，说明路径写错了，检查静态资源位置或API路径是否正确。
• 若返回500，查看后端日志，大概率是资源加载失败，比如文件不存在或者路径配置错误。

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