병갈이 블록

HTML <img>태그 이미지 출력 방법. 본문

IT(Old)/Spring 공부 기록

HTML <img>태그 이미지 출력 방법.

woojang 2017. 8. 30. 14:11

1. 이미지의 경로를 src속성에 추가한다.(경로)

2. Rest컨트롤러를 이용하여 이미지 이름을 받아 byte[]데이터를 넘겨받는 링크를 src에 추가한다.(주소)


1. 이미지의 경로를 src속성에 추가하기.

- 로컬경로(C:\로 시작하는 하드내부의 어느 장소)를 가진 경로는 보안문제로 img태그로 출력되지 않는다.

- IE만 출력해준다. 허나, 요즘 브라우저 환경은 생각해본다면 이런식으로 불러오는데 문제가 있음이 분명하다.

해결책.

- 프로젝트의 리소스 내부에 폴더를 두고 파일을 위치하게 한다.

- 경로를 /resources/로 시작되도록 한다. 그러면 출력된다. 

- 단, STS에서 보여지는 프로젝트의 경로와 설정에서 알려주는 경로는 차이가 있다.

- 외부에 노출되는(설정에서 알려주는) 경로에 리소스를 추가하면, 프로젝트 새로고침을 했을 때 

실제로 프로젝트가 참고하고 있는 위치로 복사를 한다. 이 시점부터 리소스 참고가 가능하다.

(즉, 노출되는 경로의 리소스 폴더에 파일을 추가한 것으로만은 파일을 불러올 수 없다. 실제 리소스 경로패치는

실제로 프로젝트가 참고하는 위치이기 때문이다. )

(노출경로에 추가된 파일은 프로젝트 리플래쉬가 일어날 때 실제경로에 복사가 일어나고 프로젝트상 보여지지만 

실제경로에 직접 추가된 파일은 리플래쉬를 해도 노출경로에 복사되지도 않고 프로젝트상에 보여지지도 않는다.)


2. 이미지의 경로를 링크로 걸기.

- 실제 파일의 위치는 상관이 없어진다.

- rest컨트롤러에서 파일의 이름을 파라미터값으로 받아 파일의 저장경로를 붙여 전체경로를 만든다.

- FileInputStream을 이용하여 InpuStream을 생성한다.

- 생성한 InputStream은 commons API에서 제공하는 IOUtils.toByteArray(InputStream is) 메서드를 이용하여

byte[] 자료형 데이터를 만들어서 ResponseEntity<byte[]>형태로 반환한다.

- 이방법이 실제 파일 경로를 숨기기도 좋고 파일을 관리하기에도 편하다는 나름의 결론...(나만의 생각.)


Comments