Список изображений Base64, встроенных в Thymeleaf, не будет отображаться

Question

В итоге я составил список изображений, полученных из моей базы данных, где они хранятся как 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
}

Skills.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
}

HomeController

@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>

Answer 1

Вероятно, это должно выглядеть примерно так:

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

Исходя из ваших комментариев, у вас должны быть все инструменты, необходимые для отладки.Вы сказали, что это когда вы просматриваете источник:

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

Поэтому вы знаете, что переменная Thymeleaf не проверялась.Кроме того, userImages - это массив, поэтому вам нужно индексировать его.Вам придется вычислить правильный индекс, так как вы не зацикливаетесь на массиве, я не уверен, как написать эту часть кода.