title: List of Base64 images embedded in Thymeleaf will not display
body: <p>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. </p>
  
  <p>User.java</p>
  
  <pre><code>@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&lt;Skills&gt; userSkills;
  
    public User() {
    }
    ... getters/setters
  }
  </code></pre>
  
  <p>Skills.java</p>
  
  <pre><code>@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
  }
  </code></pre>
  
  <p>HomeController</p>
  
  <pre><code>@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&lt;Skills&gt; userSkillsList = skillsService.findSkillList("wmangram");
  
      List&lt;byte[]&gt; logo = skillsService.findLogos();
      List&lt;String&gt; base64List = new ArrayList&lt;&gt;();
  
      for (int i = 0; i &lt; 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 &lt; 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 &lt; 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";
  }
  </code></pre>
  
  <p>skills.html</p>
  
  <pre><code>&lt;tbody&gt;                                      
    &lt;tr th:if="${userSkills.empty}"&gt;                                           
       &lt;td colspan="2"&gt; No Skills Available &lt;/td&gt;                                      
    &lt;/tr&gt;                                      
    &lt;tr th:each="skills : ${userSkills}"&gt;
      &lt;td&gt;&lt;span th:text="${skills.techName}"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;
          &lt;img th:src="@{'data:image/png;base64,${userImages}}"/&gt;
      &lt;/td&gt;
    &lt;/tr&gt;                              
  &lt;/tbody&gt;
  </code></pre>