초보자도 간단하게 웹페이지에 이미지 보여주기(로컬 폴더에 있는 이미지 JSP에서 보여주기)

저번에 파일 업로드하여 로컬에 특정 폴더에 이미지 파일 만들어 새로 저장하고

동시에 DB에 이미지명을 저장방법에 대해서 배워보았다! (못 보신 분들은 아래 링크참고!)

https://cbn1218.tistory.com/35

초보자도 간단하게 스프링으로 만드는 파일업로드 기능(spring file upload)

그렇다면 저번에 저장한 이미지를 웹페이지에 어떻게 보여주면 되지??

지금 쇼핑몰을 만들고 있는데 상품이미지를 어떻게 보여주지??

하고 고민하시는 저와 같은 초보 개발자들에게 도움 되고자 포스팅 한다.

 

1.설명

원리는 간단함! 저번에 ajax통신으로 데이터를 불러와 동적으로 보여 줬던 것 처럼 DB에 fileName항목을 첨부 하여

특정 글자나 버튼을 눌렀을때 ajax통신으로 fileName을 쿼리에 넣어주고 쿼리와 함께 이미지를 보여주는 특정 URL로 이동 하여 controller를 탔다가 이미지를 보여 줌!

 

여튼 선행 되어야 할 지식은 ajax통신에 대해 알아야 아래 부분을 이해 하는데 좀더 쉬울듯 함.

https://cbn1218.tistory.com/32

초보자를 위한 Ajax통신으로 메뉴불러오기_(1)

https://cbn1218.tistory.com/33

초보자를 위한 Ajax통신으로 메뉴불러오기_(2)

2.구현

(1)DB 부분

DB는 위에 링크보면 기존에 ajax통신 포스팅때 사용하던 DB를 활용했으며

추가로 imageName 부분을 넣었음!

CREATE TABLE employee(
name VARCHAR(30) NOT NULL,
age INT,
number VARCHAR(30) NOT NULL,
part VARCHAR(30) NOT NULL,
rank VARCHAR(30),
imageName VARCHAR(30)
)DEFAULT CHARSET=UTF8

 

(2)VO 부분

vo에서도 db에서 만든 imageName를 담아줄 그릇이 필요하기 때문에 추가해주고 getter/setter도 추가해줌

package ddi.main.domain;

public class employeeVO {
	
	private String name;
	private int age;
	private String number;
	private String part;
	private String rank;
	private String imageName;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getNumber() {
		return number;
	}
	public void setNumber(String number) {
		this.number = number;
	}
	public String getPart() {
		return part;
	}
	public void setPart(String part) {
		this.part = part;
	}
	public String getRank() {
		return rank;
	}
	public void setRank(String rank) {
		this.rank = rank;
	}
	public String getImageName() {
		return imageName;
	}
	public void setImageName(String imageName) {
		this.imageName = imageName;
	}

}

(3)mapper.xml, mapper 인터페이스, service 인터페이스, controller 

위에 나열한 부분은 기존에 데이터를 불러오는 코드를 수정할거 없이 그대로 씀!

(기존코드가 궁금하시면 위에 링크 꼭 참고 바람! )

 

(4)controller 부분

이미지 불러오는 controller를 추가해 줘야 함.

ResponseEntity는 HttpEntity(HttpHeader 와 HttpBody를 포함하는 클래스)를 상속받아 응답에 관련된 Http의 header와 body,status 를 포함하기 때문에 커스텀마이징 할수 있음.

그렇다면 왜?? byte[]타입인가? 자세히는 모르겠지만 구글링하여 유추해본 결과 인터넷에서 데이터파일을 주고받을때 byte단위로 주고 받는다함, 그래서 파일을 바이트단위로 쪼개서 만드는게 아닌가 싶음.

 

@GetMapping("/showImage.do")
	public ResponseEntity<byte[]>view(String fileName) throws Exception {
		
		//파일객체를 만들어 이미지를 접근하는 경로와 파라미터로 받은 파이이름을 넣어줘서 객체선언 
        File file= new File("c:\\upload\\"+fileName);
		
        //응답을 보낼때 http부분을 커스텀 마이징 해서 보내기 위하여 byte타입의 ResponseEntity 선언
		ResponseEntity<byte[]> result = null;
		
		try {
			//HttpHeaders 선언
			HttpHeaders header = new HttpHeaders();
			
            //HttpHeaders의 Content-type는 클라이언트에게 보낼 문서가 어떤종류의 문서인지 문서종류에 대한 정의
            //probeContentType()은 파일의 확장자를 이용하여 MIME타입을 알려줌
			header.add("Content-type", Files.probeContentType(file.toPath()));
			
            //FileCopyUtils.copyToByteArray 는 대상 파일을 복사하여 Byte 배열로 반환해주는 클래스임.
            //HttpStatus.OK는 이작업이 잘 완료 되었다면 200 ok 사인을 보내라!
			result = new ResponseEntity<>(FileCopyUtils.copyToByteArray(file), header, HttpStatus.OK);
			
		}catch (IOException e) {
			e.printStackTrace();
		}
		
        //마지막에 http정의 해준 부분을 넣어줌
		return result;
	}

 

(6) javaScript부분

ajax부분으로 이전코드와 동일한데

$(".image").append("<img src='/showImage.do?fileName="+result.user.imageName+"'>");

이미지를 불러오는 부분을 추가하여 img src로 이미지를 불러오는 url로 작성하여 쿼리를 넣어주는 형태로 fileName을

동적으로 불러와서 이미지를 불러옴 

function employee(number) {
	console.log("버튼 누름"+number);
	
	$.ajax({
		/* 전송 전 세팅 */
		type:"POST",
		data:"number="+number, //사번을 controller로 넘겨주고 해당 사번에 해당하는 DB를 받아가지고 옴
		url:"employee.do", //데이터를 전송하여 저장시키는 url
		dataType:"json", //리턴타입, 성공여부를 json로 추출해줌
		
		/* 전송 후 세팅 */
		success: function(result) {
			
				$(".image").append("<img src='/showImage.do?fileName="+result.user.imageName+"'>");
 				$(".name").append(result.user.name);
				$(".age").append(result.user.age);
				$(".number").append(result.user.number);
				$(".part").append(result.user.part);
				$(".rank").append(result.user.rank); 
				
				$(".name").unwrap();
				
			console.log("통신ok");
		},
	    error: function() { //시스템에러
	    	alert("오류발생");
	    	console.log("오류발생");
		}
	});
}

 

(7)jsp 부분

<div class="rightDiv">
	<div class="image"></div>
	<div>이름 :<b class="name"></b></div>
	<div>나이 :<b class="age"></b></div>
	<div>사번 :<b class="number"></b></div>
	<div>부서 :<b class="part"></b></div>
	<div>직급 :<b class="rank"></b></div>
</div>

<div class="image"></div>이 부분이 이미지가 들어갈 부분 이라 기존코드에 추가해줌

 

3.결과화면

김사원 사원을 클릭하면 사번이 넘어가면서 DB에서 데이터를 불러올때 김사원의 이미지까지 불러와 이미지를 보여줌