Thymeleaf 中嵌入的 Base64 图像列表将不会显示

Question

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

用户.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
}

技能.java

@Entity
public class Skills {

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

  private String techName;
  private byte[] logo;

  @ManyToOne
  @JoinColumn(name = "user_id")
  private User user   ;

  public Skills() {
  }
  ... 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";
}

技能.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>

Answer 1

它应该看起来像这样：

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

根据您的评论，您应该拥有调试它所需的所有工具。你说这是查看源码时的样子：

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

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