Framework/Spring Framework

(23.01.13)Spring 프레임워크 : 업로드된 이미지를 브라우저에서 보기(이미지 태그, Thymeleaf에서 이미지 가져오기)

프로그래머 오월 2023. 1. 16.

업로드된 이미지를 브라우저에서 보기

-WEB-INF 아래의 디렉토리는 웹브라우저에서 접근 불가(WEB-INF/files/)

-서버측에서 WEB-INF 아래의 이미지를 전해줄 수는 있음

-<img src="/image/mypic.jpg">

-위의 태그가 웹브라우저에 로드되면 웹브라우저는 해당 이미지를 서버에 요청하게 됨

-위의 요청을 처리하는 컨트롤러 메소드가 있다면 이 때 그 메소드가 실행됨

-컨트롤러에서는 @ResponseBody를 사용하여 byte[ ]이 브라우저로 리턴되도록 함

-이미지 데이터를 받은 <img src='xxxx'> 태그는 이미지를 화면에 표시할 수 있음

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import java.io.InputStream;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import lombok.extern.slf4j.Slf4j;
 
@Slf4j
@Controller
@RequestMapping("/image")
public class ImageController 
{
   @Autowired
   private ResourceLoader resourceLoader;//spring에서 지원해주는 ResourceLoader : 코드가 아닌 다른 모든 것을 resource라고한다.
   
   @GetMapping("/test")
   public String showImage()
   {
      return "thymeleaf/showImage";
   }
   
   @GetMapping(value="/{filename}", produces=MediaType.IMAGE_JPEG_VALUE)
   @ResponseBody
   public byte[] getImage(@PathVariable String filename)
   {
      try {
         Resource resource = resourceLoader.getResource("WEB-INF/files/"+filename);     
         //Resource 객체는 파일의 모든 정보(파일 이름, 사이즈, 경로 등등)를 가져와 담는다.
         InputStream in = resource.getInputStream();
         int len = (int)resource.getFile().length(); //파일의 전체 크기가 long형으로 나오지만 대부분의 image size는 int로 되어 있어서 int로 변환해준다.
         log.info("파일 크기={}, available={}", len, in.available());
 
         byte[] buf = new byte[len];  //파일 전체를 담을 수 있는 메모리 공간 확보
         in.read(buf, 0, len);  //"in"이 읽어온 파일의 데이터를 빈 byte array "buf"에 담는다.
         //이 버퍼의 처음(0)부터 len만큼까지에 담길 만큼 파일 데이터를 가져와서 담게된다.
         in.close();
         return buf; //buf반환
      }catch(Exception ex) {
         ex.printStackTrace();
      }
      return null;
   }
}
Colored by Color Scripter

cs

이미지 파일은 문자열이 아닌 byte 배열로 전환되어 전송된다. 따라서 stream을 통해서 데이터를 입출력할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>업로드된 이미지를 브라우저로 보기</title>
</head>
<body>
<p></p>
<h3>업로드된 이미지를 브라우저로 보기</h3>
 
<img src="/image/anjelina.jfif">
 
<!-- src의 속성으로 사용된 url은 브라우저가 서버에 대한 요청으로 사용하므로 
해당 요청을 처리하는 컨트롤러 메소드가 있는 경우에는 이미지 데이터를 응답으로 리턴하면 된다 
-->
</body>
</html>
Colored by Color Scripter

cs

Thymeleaf에서 이미지 경로로 브라우저에 이미지 띄우는 방법

1

<img th:src="@{/dageul/getprofile/}+${member.profile}" align="left" width="96px" height="117px" />

cs

dageul/getprofile/ : url

${member.profile} : 파일명

'Framework > Spring Framework' 카테고리의 다른 글

(23.01.16.)Spring 프레임워크 : 이메일 인증 보완 - 다른 기기에서 인증시 세션이 달라 인증 오류 고치기 (0)	2023.01.18
(23.01.14.)Spring 프레임 워크 : 에러 페이지 만들기 (0)	2023.01.17
(23.01.12) Spring 프레임 워크 : CRSF(Cross Site Request Forgery) (0)	2023.01.13
(23.01.11.)Spring 프레임워크 : Spring Security -JDBC Authentication (1)	2023.01.11
(23.01.06)Spring 프레임워크 : thymeleaf를 이용한 보안 로그인 - 로그인 에러 (0)	2023.01.09

(23.01.13)Spring 프레임워크 : 업로드된 이미지를 브라우저에서 보기(이미지 태그, Thymeleaf에서 이미지 가져오기)

'Framework > Spring Framework' 카테고리의 다른 글

댓글

티스토리툴바