List of Base64 images embedded in Thymeleaf will not display

Question

I ended up making a List of images received from my database where they are stored as LongBlob. After receiving them, I then create a new list of base64 and encode those values into the Base64 list. The issue is that when I go to insert this into Thymeleaf it doesn't display any images.

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

It should probably look something like this:

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

Based on your comments, you should have all the tools you need to debug this. You said this is what when you view the source:

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

Therefore you know that the Thymeleaf variable wasn't being evaluated. Also, userImages is an array, so you need to index into it. You'll have to figure out the correct index though, since you aren't looping over the array I'm not sure how to write that part of the code.