Thymeleaf中如何检查@{}路径图片是否存在并显示替代图？

你的核心问题是：Thymeleaf的@{}语法只是用来生成URL字符串，不会检查服务器上的实际文件是否存在，所以你写的th:if="(@{'static/products/' + ${product.id} + '.png') != null"永远为真，根本起不到判断图片是否存在的作用。

下面给你两种可行的解决办法：

方法一：后端提前判断（推荐，更可靠） #

在把商品列表传到前端之前，后端先检查每个商品的图片是否存在，给商品对象加一个标识字段（比如hasImage），前端直接根据这个字段显示对应图片。

后端代码示例（Spring Boot环境） #

@Autowired
private ResourceLoader resourceLoader;

// 处理商品列表时
public String productList(Model model) {
    List<Product> productList = productService.getAllProducts();
    for (Product product : productList) {
        try {
            // 检查静态资源路径下的图片是否存在
            Resource resource = resourceLoader.getResource("classpath:static/products/" + product.getId() + ".png");
            product.setHasImage(resource.exists());
        } catch (Exception e) {
            product.setHasImage(false);
        }
    }
    model.addAttribute("productList", productList);
    return "product/list";
}

前端代码示例 #

<!-- 循环生成商品卡片 -->
<div th:each="product : ${productList}" class="card">
    <!-- 有图片时显示商品图 -->
    <img th:if="${product.hasImage}" 
         th:src="@{/static/products/{id}.png(id=${product.id})}" 
         class="card-img-top" 
         alt="immagine_vinile">
    <!-- 无图片时显示默认替代图 -->
    <img th:unless="${product.hasImage}" 
         th:src="@{/static/products/default.png}" 
         class="card-img-top" 
         alt="immagine_vinile">
    <!-- 其他商品信息 -->
    <div class="card-body">
        <h5 th:text="${product.name}" class="card-title"></h5>
    </div>
</div>

方法二：前端JS监听加载失败（快速实现） #

不用改后端，给图片标签加onerror事件，当图片加载失败时自动替换成默认图：

<div th:each="product : ${productList}" class="card">
    <img th:src="@{/static/products/{id}.png(id=${product.id})}" 
         class="card-img-top" 
         alt="immagine_vinile"
         onerror="this.src='[[@{/static/products/default.png}]]';">
    <!-- 其他商品信息 -->
    <div class="card-body">
        <h5 th:text="${product.name}" class="card-title"></h5>
    </div>
</div>

这里[[@{/static/products/default.png}]]是Thymeleaf的内联表达式，用来生成正确的默认图URL，避免路径错误。

注意：这种方法可能会出现短暂的加载失败闪烁（浏览器先请求不存在的图片，失败后再换默认图），用户体验略差。

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