Thymeleaf循环渲染时所有元素显示同一张图片问题求助

架构老林

2026-8-18

问题解决办法

1. 修正循环变量引用错误

首先检查循环变量的引用一致性：你的Thymeleaf循环应该定义当前元素的变量名，比如th:each="camp : ${randomSummerCamps}"，然后img标签必须使用当前循环元素的图片字段，不能引用全局的无关变量（比如你之前用的randomImageSummerCamp），这是导致所有图片显示相同的核心原因。

示例循环结构：

<div th:each="camp : ${randomSummerCamps}">
  <h2 th:text="${camp.title}"></h2>
  <p th:text="${camp.state}"></p>
  <!-- 这里必须使用循环变量camp的图片属性 -->
  <img th:if="${camp.image != null}" alt="sample" th:src="|data:image/png;base64,${camp.imageBase64}|" src=""/>
</div>

2. 将MongoDB Binary对象转换为Base64字符串

直接拼接org.bson.types.Binary对象会得到它的toString结果（如org.bson.types.Binary@96e8964c），这不是有效的Base64编码，必须把它的字节数组转成Base64字符串，有两种实现方式：

方法一：实体类添加转换方法

在你的实体类中新增一个getter方法，专门返回图片的Base64编码字符串：

import org.bson.types.Binary;
import java.util.Base64;

public class SummerCamp {
    private String title;
    private String state;
    private Binary image;

    // 原有getter、setter方法
    public String getImageBase64() {
        if (image == null) {
            return null;
        }
        // 将Binary中的字节数组编码为Base64字符串
        return Base64.getEncoder().encodeToString(image.getData());
    }
}

方法二：Thymeleaf中直接调用工具类转换

如果不想修改实体类，可以在Thymeleaf中直接使用Spring的Base64Utils工具类（需确保项目引入Spring相关依赖）：

<img th:if="${camp.image != null}" alt="sample" 
     th:src="|data:image/png;base64,${T(org.springframework.util.Base64Utils).encodeToString(camp.image.getData())}|" 
     src=""/>