spring에서 이미지 보여주기

썸네일은 테스트용으로 썼던 이미지

오늘 한참 헤맨 내용이었다.

목적은 내부 프로젝트에 이미지를 저장하고, 그 이미지를 보여주는건데 http://localhost:8080/... 이런 식으로 작성하면 이미지를 못찾는다. 인텔리제이에서 링크가 되더라도 /resources/static/img 에 있는 이미지만 보여지고 그 외 경로에 저장된 이미지는 불러오지 못했다. 하루 종일 시도한 것 같은데 성공해서 기록해둔다.

---

첫 시도

처음 생각한 방법은 프로젝트 내부에 있는 디렉토리 경로를 그대로 적는 방법이었다. 그래도 상식(?)적으로 일단 /resources/static/img에 이미지를 저장하고 불러왔다.

<img id="leaveImage" src= "/img/image.jpg">

결과는 성공! 그렇지만 이미지를 계속 쌓아야하니까 이 위치는 부적절해보였다. 하다못해 디렉토리를 하나 더 만들고 그 밑에 이미지를 저장해야겠다고 생각해서 leaveImage 폴더를 만들고 src에 /resources/static/img/leaveImage라고 지정했다.

<img id="leaveImage" src= "/img/leaveImage/image.jpg">

이때부터 이미지가 안나왔다.

두 번째 시도

그 다음으로 시도한 방법은 그냥 무식하게 모든 경로를 다 넣는 방법이었다.

<img id="leaveImage" src= "http://localhost:8080/img/leaveImage/image.jpg">

당연히 안됐다.

이쯤 든 생각이 '애초에 스프링 혹은 타임리프가 어떻게 /img를 알고 있지?' 라는 생각이었다. 처음에는 /img의 경로를 알고 있으니까 불러왔는데 그 하위의 디렉토리를 모른다는게 이상했다. 사실 이건 아직도 모르겠다.... 이것도 나중에 찾아봐야지

세 번째 시도

이쯤되니 구글링을 시도했다. 'spring boot 내부 이미지 호출'로 검색해서 제일 상위에 있는 블로그 글을 읽고 시도했는데 실패했다. ResponseEntity를 사용하는 방법이었는데 역시 의미도 모르고 시도하는건 한계가 있다. 단순 복붙으로 일을 쉽게 해결하려고 했던 점을 반성하면서 바로 포기했다.

네 번째 시도

다시 두번째 시도때 한 생각으로 돌아갔다. 애초에 이 이미지는 내부에 있고, 그러면 /img에서 불러오는거랑 동일한 논리로 동작할텐데 왜 /img만 알고 있지? 라는 생각이 들었다. 그리고 그러면 내가 원하는 디렉토리 위치를 스프링이 알고 있으면 불러올수 있지 않을까?하는 생각이 들었다. 그래서 '설정' 관련된 블로그 글만 빠르게 찾아봤다. 그리고 발견한 방법으로 성공했다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**")
                .addResourceLocations("/resources/");
    }
}

<img id="leaveImage" src= "/resources/leaveImage/image.jpg">

자세한 사용 방법을 더 찾아봐야겠지만 이렇게 하면 url이 resources로 시작할때 /src/main/webapp/resources 이 위치에 있는 리소스를 보여준다.

---

추가로 공부할 내용

• 왜 이미지 리소스는 외부에서 호출하기 어려운지
• addResourceHandlers 메소드 정확한 사용법 알기