byte 배열로 저장된 이미지 뷰에서 디스플레이

이미지를 db에 byte 배열로 저장해서 뷰에서 보이도록 하고 싶다. 

 

방법은 다음과 같다.

 

 

1. byte 배열로 저장된 이미지 파일을 Base63 로 인코딩한다 

// byte 배열을 base64 string 형으로 변환해 리턴
// 이 형식으로 뷰에서 display 가능
public String generateBase64Image() {
    return Base64.encodeBase64String(this.getImage());
}

 

2. 뷰

<!-- 모델에 담겨있는 "img" 불러옴   -->
<tr th:each="image : ${page.images}">
    <td>
       <p th:text="${image.id}"></p>
        <img th:src="${'data:image/jpeg;charset=utf-8;base64,' + image.generateBase64Image()}" alt="">
    </td>
</tr>

th:each 로 page 객체에 담겨 있는 image 객체들에 모두 접근하고 있고,

<img> 태그를 보면 image.generateBase64Image() 메서드로 Base64 로 변환된 값을 받는다. 

 

 

3. 결과 

 

이미지 크기 지정안해서 너무 크긴한데 정상적으로 뷰에서 보이는걸 확인 가능하다.