[bobzip] 로컬에 저장된 이미지 표시하기 (ResourceHandler)

문제상황

1. 클라이언트가 입력한 이미지를 로컬폴더에 저장하면, img 태그가 사진을 표시하지 못한다.

# 이미지 파일 저장 경로
recipeThumbnail.dir : C:/Users/ekore/file/
stepThumbnail.dir : C:/Users/ekore/file/step/

@Component
public class FileStore {

    @Value("${recipeThumbnail.dir}")
    private String recipeThumbnailDir;
    @Value("${stepThumbnail.dir}")
    private String stepThumbnailDir;


    public UploadFile addThumbnail(MultipartFile thumbnail) throws IOException {
        return addFile(thumbnail, recipeThumbnailDir);
    }

이미지 파일 업로드는 잘 동작한다. 그런데.....

<img th:src="|/file/${recipe.thumbnail.storedFileName}|">

타임리프에서 업로드된 이미지를 표시하기 위한 img 태그가 동작하지 않았다...

 

원인과 해결

1. 웹 브라우저는 보안상의 이유로 로컬파일을 참조하지 못한다. 

2. 스프링 프레임워크에서는 src/main/resources 디렉터리 내의 파일들만 리소스로 참조할 수 있다. (기본설정)

해결 : 리소스가 다른 경로에 저장되는 경우라면 ResourceHandler  를 추가해줘야 한다.

 

한참을 씨름해서 원인을 찾을 수 있었다. 웹 브라우저는 로컬 파일을 참조하지 못한다.

만약 크롬이 내 C 드라이브에 저장된 파일을 참조할 수 있다면, 나는 웹사이트를 방문한 것만으로

내 파일이 서버에 업로드 될 수 있다. 심각한 보안상의 위험이 있는 것이다.

 

또한 스프링 프레임워크는 리소스를 참조할때 resources 폴더를 탐색하도록하는 기본 ResourceHandler 를 제공한다.

만약 리소스가 다른 경로에 저장되는 경우라면 ResourceHandler  를 추가해줘야 한다.

 

그럼 그냥 resources 에 이미지를 저장하면 안될까? 처음에 이 방법도 고민해봤지만, 좋은 방법이 아니라고 생각했다.

실제 프로젝트가 배포되어 동작할때, 클라이언트가 입력하는 이미지는 외부 서버 파일 저장소에 보관되기 때문이다.

최대한 실제 구동환경과 비슷한 환경을 만들고 싶었다. 결국 스프링 프로젝트에서 외부 로컬 파일을 참조하려면

ResourceHandler 를 추가해줘야 한다.

 

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/file/**")
                .addResourceLocations("file:C:/Users/ekore/file/");
    }
}

 

 

addREsourceHandlers(ResourceHandlerRegistry registry) : ResourceHandler를 추가하기위한 콜백 메서드

 

registry.addResourcesHandler("/file/**") : ResourceHandler 가 작동하는 경로를 지정한다.

 

registry.addResourceLocations("file:C:/Users/ekore/file/") : ResourceHandler 가 작동할때 리소스를 탐색하기 위한 로컬 경로를 지정했다. 만약 외부서버의 파일 저장소를 사용한다면 외부서버 저장소 경로를 지정한다.

 

 

 

이미지가 정상적으로 출력된다.