Spring Boot에서 타임리프 이미지 동적 리소스 사용하기

스프링 부트에서 타임리프를 사용하던 중 이미지를 업로드 후 파일이 즉시 반영이 안 되는 이슈가 있었습니다. 스프링에서 static 폴더는 정적 리소스 폴더인데 여기 안에서 사용자가 이미지를 업로드하고, 삭제, 이용하게 설계해서 이슈가 발생했습니다. 대부분 AWS S3나 외부 디렉터리를 사용하여 컨트롤러 라우터에서 이미지 path를 받고, 외부 디렉터리에서 파일을 가져와 이미지를 뿌려주는 방식입니다. 여기서 중요한 점은 파일이 업로드한다고 해서 바로 웹 리소스로 쓸 수 없습니다. 컨트롤러에 한 번 요청해서 내려줘야 합니다.

 

/resources/user

유저가 파일을 업로드하면 위와 같은 위치에 파일을 저장하게 됩니다. 여기서 웹 리소스로 한 번 더 매핑해서 내려주는 작업을 해주어야 합니다.

package com.metanet.jo2jo.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@Slf4j
@PropertySource("classpath:/common.properties")
public class WebMvcConfig implements WebMvcConfigurer {

    // 파일 저장할 위치
    @Value("${file.add}")
    private String potoAdd;
    //web root가 아닌 외부 경로에 있는 리소스를 url로 불러올 수 있도록 설정
    //현재 localhost:8080/resources/user/1234.jpg
    //potoAdd에 실질적인 파일저장위치를 설정해줍니다.
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/user/**")
                .addResourceLocations(potoAdd);
    }
}

common.properties
file.add=file:///Users/sungmin/Desktop/파일저장위치

 

디렉터리 리소스를 웹 리소스로 핸들링해주는 config입니다.

 

파일 업로드 시

스프링 부트를 리프레쉬하지 않아도 이미지가 실시간으로 반영되는 모습을 볼 수 있습니다. controller에서 이미지 경로를 "/resources/user/이미지 이름" 이런 형식으로 내려주면 됩니다.

//이미지 파일보여주는 html
<img class="img-fluid" th:src="@{${test.photoaddr}} "  alt="user-header">