Blob 데이터를 이미지로 보여주는 방법

DB에 Blob으로 저장되 있는 이미지데이터를 조회해서 화면에 보여줄 필요가 있었습니다.

 

Entity에서는 Blob데이터를 아래와 같이 ByteArray으로 가져올 수 있습니다.

@Column(name="img_data")
@Lob
val imgData: ByteArray,

 

가져온 ByteArray는 아래의 함수를 호출해서 이미지데이터를 Base64 인코딩 후 앞에 data:image/png;base64, 를 추가합니다. 이 데이터 URL(data URL)을 사용하여 HTML에서 이미지를 인라인으로 명시할수 있습니다. 브라우저는 이 데이터를 디코딩하여 이미지를 렌더링합니다.

fun getImgSrc(byteArray: ByteArray) : String {
    var base64Encode = Base64.getEncoder().encodeToString(byteArray)
    base64Encode = "data:image/png;base64," + base64Encode;
    return base64Encode;
}

data:image/png;base64, 문자열은 크게 세 부분으로 나눌 수 있습니다:

1. data: - 이 부분은 데이터 URL의 시작을 나타냅니다.
2. image/png; - 이 부분은 MIME 타입을 나타냅니다. 여기서 image/png는 이미지 파일이 PNG 형식임을 나타냅니다. 이 부분은 이미지 형식에 따라 다를 수 있습니다. 예를 들어, JPEG 형식의 이미지는 image/jpeg가 됩니다.
3. base64, - 이 부분은 데이터가 base64로 인코딩되었음을 나타냅니다. 실제 이미지 데이터는 base64로 인코딩된 문자열로 이어집니다.

 

html에서는 아래와 같이 src에 데이터 URL을 넣어주면 이미지가 보이게 됩니다.

<img id="testImg" src="">
<script>
document.getElementById("testImg").src = res.imgData;
</script>