Отображение изображения на Thymeleaf из списка объектов, возвращаемых через MySQL / Hibernate

Question

Я пытаюсь создать веб-сайт портфолио, в котором я могу редактировать все элементы портфолио, используя свой собственный REST API. Имея это в виду, я сохранил 8 изображений в своей базе данных в таблице навыков, которая имеет внешний ключ user_id.

Всякий раз, когда я иду, чтобы отобразить страницу с моими навыками Thymeleaf, вместо того, чтобы получить изображение, я получаю незагруженное изображение, и это отображается в моем источнике страницы просмотра "[B @ 6e8a976f".

Я пытался преобразовать его в Base64, но продолжаю получать исключение нулевого указателя.

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, Skills skills) {
      User user = userService.findByUsername("wmangram");
      List<Skills> userSkillsList = skillsService.findSkillList("wmangram");

      theModel.addAttribute("userSkills", userSkillsList);

      return "technology";
  }

  @RequestMapping("/resume")
  public String showResume() {
      return "resume";
  }

}

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="${skills.logo}"/></span></td>                                      
  </tr>                                  
</tbody>

UPDATE

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

    byte[] encodeBase64 = Base64.encodeBase64String(skillsService.findLogos());
    String base64Encoded = new String(encodeBase64, "UTF-8");
    ModelAndView.addObject("userImage", base64Encoded );

    theModel.addAttribute("userSkills", userSkillsList);

    return "technology";
}

SkillService.java

public interface SkillsService {
  List<Skills> findSkillList(String wmangram);

  byte[] findLogos();


}

SkillServiceImpl.java

public byte[] findLogos() {
    return skillsDao.findLogos();
}

CustomerSkillsDao.java

@Repository
public interface CustomSkillsDao {

@Query("SELECT logo from portfolio.skills")
byte[] findLogos();
}

Обновление 2 HomeController

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);
    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));
    }
// All the base64List.get(j) in the sysout prints different base64 values so 
// I wouldn't imagine that this should be causing an issue 
// unless there is something I'm missing

Answer 1

Вам нужно преобразовать его в base64, если это еще не сделано.

После конвертации ниже должно работать.

<img src="data:image/jpg;base64, [your byte array]">

Answer 2

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

    @RequestMapping(value = "/image/{imageid}", method = RequestMethod.GET)
    public String image(Model model,@PathVariable int imageid) throws UnsupportedEncodingException {            
        String encodeBase64 = convertBinImageToString(imagedao.getObject(imageid).getImage()); 
        String photoencodeBase64 = new String(encodeBase64);
        model.addAttribute("image", photoencodeBase64);
        return "imageview"; 
    }

    public static String convertBinImageToString(byte[] binImage) {
        if(binImage!=null && binImage.length>0) {
            return Base64.getEncoder().encodeToString(binImage);
        }
        else
            return "";
    }

На странице JSP: <img src="data:image/jpeg;base64,${image}" />