[JHipster] 이미지 불러오기

이미지 파일 불러오기

업로드한 이미지를 로컬 디렉토리에 저장하고, 그 경로를 DB에 저장했다. 이제 그 경로를 통해, 이미지를 불러와서, View를 누를 시, 이미지가 보여지게 만들 것이다.

front-end

현재까지 View 페이지는 아래와 같다.

Image Path가 잘 나오는 걸 확인했으므로, Image Path는 안보이게 하고, Image Path를 통해 이미지를 불러와서 보여주려고 한다.

현재 기본 Detail html 코드는 아래와 같다.

img객체를 불러와서 그 값을 출력해 주는 형태이다. 이미지를 출력하기 위해 아래의 코드를 추가해준다.

<dt><span>Image</span></dt>
<dd>
	<div *ngIf="img.image">
		<a (click)="openFile(img.imageContentType, img.image)">
			<img [src]="'data:' + img.imageContentType + ';base64,' + img.image" style="max-width: 100%;" alt="image image"/>
		 </a>
		{{img.imageContentType}}, {{byteSize(img.image)}}
	</div>
</dd>

component파일에 openFile, byteSize를 추가해준다.

openFile(파일을 열기 위함)

  openFile(contentType, field) {
    return this.dataUtils.openFile(contentType, field);
  }

byteSize(바이트 사이즈를 구하기 위함)

  byteSize(field) {
    return this.dataUtils.byteSize(field);
  }

이 과정까지 하고 view를 누르면 아래와 같은 화면이 나온다.
백 엔드 부분에서 img객체에 해당 경로를 통해 이미지를 불러와 byte로 넣어주면 view화면에서 이미지가 보여질 것이다.

back-end

view를 누르면 get 방식으로 id값이 전달된다.

Resource.java 파일의 @GetMapping 부분으로 연결이 된다. 아래는 기본 Resource파일이다.

Service 파일의 findOne 을 통해 Id별로 저장되어있는 DTO를 가져와서 리턴해준다.

그러면 Resource파일의 Optional<ImgDTO> imgDTO에는 해당 id를 가진 테이블의 title, content, image_path가 들어있을 것이다.

우리는 image_path를 다시 바이트파일로 만들어서 front-end쪽으로 넘겨줘야한다.

image_path 값을 읽어와서, 파일이 어디 저장되어있는지 확인하고, 그 경로를 Path 객체로 만들어준다.

Path 객체를 통해, File을 바이트로 읽어온다.

DTO의 setter를 이용하여, 생성한 바이트 파일과, imageContentType 값을 넘겨준다.

그럼 front-end로 DTO가 전달되고, <img [src] /> 태그안에 imageContentType과 바이트파일을 넣어주면, 이미지가 제대로 출력됨을 볼 수 있다.

전체코드는 아래 주소에서 확인 할 수 있다.(img로 시작하는 부분만 (image와 upload-image는 아닙니다!!))
https://github.com/KJunseo/JHipster-image-handling