Spring mvc 嵌入在Thymeleaf中的Base64图像列表将不显示

最后，我制作了一个从数据库接收的图像列表，这些图像存储为LongBlob。在收到它们之后，我创建了一个新的base64列表，并将这些值编码到base64列表中。问题是，当我将它插入到Thymeleaf中时，它不会显示任何图像

User.java

@Entity
public class User {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private long id;

  private String firstName;

  private String lastName;

  private String username;

  private String email;

  private String phoneNumber;


  @OneToOne
  private Demographic demographic;

  @OneToOne
  private Resume resume;

  @OneToMany(mappedBy = "user", cascade = CascadeType.ALL, fetch = FetchType.LAZY)
  @JsonIgnore
  private List<Skills> userSkills;

  public User() {
  }
  ... getters/setters
}

家庭控制器

@Controller
@RequestMapping("/")
public class HomeController {

  @Autowired
  private UserService userService;

  @Autowired
  private SkillsService skillsService;


  @RequestMapping("/home")
  public String showHome() {
      return "index";
  }

  @RequestMapping("/portfolio")
  public String showPortfolio() {
      return "portfolio";
  }

  GetMapping(value = "/technology")
public String technologyList(Model theModel) throws IOException {
    User user = userService.findByUsername("wmangram");
    List<Skills> userSkillsList = skillsService.findSkillList("wmangram");

    List<byte[]> logo = skillsService.findLogos();
    List<String> base64List = new ArrayList<>();

    for (int i = 0; i < logo.size(); i++) {
        byte[] encodeBase64 = Base64.encodeBase64(logo.get(i));
        String base64Encoded = new String(encodeBase64, "UTF-8");
        base64List.add(base64Encoded);
    }
    theModel.addAttribute("userSkills", userSkillsList);
    theModel.addAttribute("userImages", base64List);

    /*for (int j = 0; j < base64List.size(); j++) {
        theModel.addAttribute("userImage", base64List.get(j));
        System.out.println("\\\nThis is the base64 called for: " + base64List.get(j));
    }*/
    /*for (int j = 0; j < logo.size(); j++) {
        theModel.addAttribute("logo", logo.get(j));
        System.out.println("\\\nThis is the logo called for: " + logo.get(j));
    }
    theModel.addAttribute("logo", logo);
    */



    return "technology";
}

skills.html

<tbody>                                      
  <tr th:if="${userSkills.empty}">                                           
     <td colspan="2"> No Skills Available </td>                                      
  </tr>                                      
  <tr th:each="skills : ${userSkills}">
    <td><span th:text="${skills.techName}"></span></td>
    <td>
        <img th:src="@{'data:image/png;base64,${userImages}}"/>
    </td>
  </tr>                              
</tbody>

---

它应该看起来像这样：

<img th:src="|data:image/png;base64,${userImages[0]}|"/>

根据您的评论，您应该拥有调试此文件所需的所有工具。您在查看来源时说过：

<img src="&#39;data:image/png;base64,${userImages}"/>

---

因此，您知道没有对Thymeleaf变量进行评估。此外，userImages是一个数组，因此需要索引到其中。不过，您必须找出正确的索引，因为您没有在数组上循环，我不确定如何编写这部分代码。

它可能看起来像这样：

<img th:src="|data:image/png;base64,${userImages[0]}|"/>

根据您的评论，您应该拥有调试此文件所需的所有工具。您在查看来源时说过：

<img src="&#39;data:image/png;base64,${userImages}"/>

---

因此，您知道没有对Thymeleaf变量进行评估。此外，userImages是一个数组，因此需要索引到其中。不过，您必须找出正确的索引，因为您没有在数组上循环，我不知道如何编写这部分代码。

嗨，Matt，很抱歉，我复制了以前的一些旧代码和文本，并相应地进行了更新。我确实将它们编码并存储在列表中，我在ThymileAF页面中调用它们，实际呈现给客户端的是什么？具体的问题是什么？当图像无法显示时，您看到的只是一个小正方形图像。这就好像Thymeleaf没有接收到单独的Base64编码对不起，我是说在文本中。它的实际评估结果是什么？从服务器返回的文本是什么？是我在源代码中得到的，就Sysout注释而言，我正在将其添加到OPHi Matt中，很抱歉，我复制了以前的一些旧代码和文本，并相应地进行了更新。我确实将它们编码并存储在列表中，我在ThymileAF页面中调用它们，实际呈现给客户端的是什么？具体的问题是什么？当图像无法显示时，您看到的只是一个小正方形图像。这就好像Thymeleaf没有接收到单独的Base64编码对不起，我是说在文本中。它的实际评估结果是什么？从服务器返回的文本是什么？是我在源代码中得到的，就我的Sysout评论而言，我正在将它添加到OPYou's awesome metroid中！将其应用于thymeleaf页面，并能够获取其中一幅图像。我的目标是让它迭代列表并显示它们，但如果我必须进入并手动插入每个列表，那么这并不是什么大问题。想要添加，我想出了迭代列表并显示图像的方法。不幸的是，我不知道如何将它显示在与userSkills列表中的相应技能相同的行中，而不显示每个行中的所有图像。相反，我做了两行，并在中使用th:each=，这给了我一个整洁的技能水平视图。我感谢大家的帮助！你太棒了！将其应用于thymeleaf页面，并能够获取其中一幅图像。我的目标是让它迭代列表并显示它们，但如果我必须进入并手动插入每个列表，那么这并不是什么大问题。想要添加，我想出了迭代列表并显示图像的方法。不幸的是，我不知道如何将它显示在与userSkills列表中的相应技能相同的行中，而不显示每个行中的所有图像。相反，我做了两行，并在中使用th:each=，这给了我一个整洁的技能水平视图。我感谢大家的帮助！