[Thymeleaf] 이미지 외부 경로에서 가져오기

# 서론

[ek tour 리뉴얼 프로젝트 중 기록]

이미지 파일을 스프링 부트 resource에 넣으면 빌드를 하면 수정하기 힘들다. 그래서 동적으로 변경가능하게끔 외부 경로에서 (가상 인스턴스에 이미지 파일을 넣어놓고, 이를 경로로 불러오기) 가져오는걸 구현하는 방법을 기록한다.

 

# 가상 인스턴스에 이미지 업로드

FileZlia로 이미지를 업로드한다.

pwd 명령어를 통해서 해당 디렉토리 위치를 파악한다.

 

/home/ubuntu/spring 

 

<img src="/home/ubuntu/spring/logo.png">

뭔가 이렇게 설정을 하면 될 것 같지만 안 된다.

따라서 추가적인 설정을 해줘야한다.

 

# 스프링 부트 설정

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/image/**")
            .addResourceLocations("file:///home/ubuntu/spring/");
}

스프링 부트에서 외부 경로로 접근하기 위해서는 리소스 핸들러를 설정해줘야한다.

addResourceHandler : src에 들어갈 경로를 적어준다.

addResourceLocations : 리눅스 가상 인스턴스에 저장되어있는 이미지 경로를 넣어준다.

 

주의!

file:/// 경로 /

꼭 이런 방식으로 넣어줘야 인식한다!! (마지막에 / 닫는거 주의)

 

# 타임리프에서 사용하기

<img src="/image/logo.png">

이제 src 경로를 이렇게 설정해주면 잘 불러와진다. (굳이 th:src를 사용하지 않아도 된다.)