[토이플젝] Thymeleaf에서 byte[] array 이미지 표시 및 다운로드 (ModelAndView)

사유 : static 폴더에 생성된 이미지는 서버 구동 이후에 자동으로 업데이트되지 않음

Spring devtools를 쓰면 된다고 하지만, intellij에서 추가적인 설정도 필요하고,

init 단계가 반복 호출되면 망가져서 사용 불가

결국 File을 백엔드에서 프론트로 직접 전달(byte[]의 형태로)

 

 

1. File을 byte[]로 변경해 전송하기 (백엔드)

 

@GetMapping("/getImage/{id}")
public ModelAndView getImage(@PathVariable String id,
                                    ModelAndView mav){
    try (InputStream inputStream = new FileInputStream("src/main/resources/static/image/"+id+".jpg")){
        byte[] byteArray = IOUtils.toByteArray(inputStream); // to byte array
        mav.addObject("playerImg",Base64.getEncoder().encodeToString(byteArray)); // base64 encode
        mav.setViewName("playerInfo"); // set html file
        return mav;
    }catch (Exception e){
        mav.setViewName("redirect:/error");
        return mav;
	}
}

• File을 받아온 후, byte[]로 변경해서 사용, common-io의 IOUtils를 사용하였다 (링크)
• 원활한 사용을 위해 base64로 인코딩하였다
• try-with-resources를 이용, close문은 생략 가능

 

 

2. 전송받은 byte[] 표시 및 다운로드 제공 (프론트)

 

<img th:src="'data:image/jpeg;base64,'+${playerImg}">
<a download="Profile.jpg" th:href="'data:image/jpeg;base64,'+${playerImg}">다운로드!</a>

• download 속성 값을 변경해 다운로드 파일 이름 변경 가능
• JSP나 기타 방식으로도 문법만 일치시키면 동일하게 사용 가능하다

 

 

3. 적용 결과

 

결과 화면

• 좌측 웹 사이트에서 이미지 정상 출력
• 우측 다운로드 이미지 정상 출력