[Spring] 외부의 정적 리소스 요청 시 WebMvcConfigurer 사용하기

수업 실습 중에, 이미지를 화면에 뿌려주고 싶었다.

file_tbl에 따로 fileList를 저장해두었고 해당 글에 포함된 이미지 파일들이 나오게 하고 싶은 것이었다.

 

우선 관련 내용을 설명해보자면 다음과 같다.

(참고로 thymeleaf를 사용하여 웹 페이지를 구현하고 있다.)

 

• 글을 작성하면 해당 글이 community_tbl에 저장된다.
• 글에 포함된 이미지들은 따로 file_tbl에 저장된다.
• 이미지가 저장될 때 이미지가 저장되는 경로도 함께 저장된다.

stored_file_path를 통해 파일이 저장된 경로를 알 수 있다.

• 글의 detail page에 들어가면 해당 글의 내용을 볼 수 있다.
• 그 중, 이미지도 함께 구현하려고 한다.

 

 

여기서 필요한 게 바로 WebMvcConfigurer이다.

 

 

 

 

 

 

 

WebMvcConfigurer란?

 

Spring 프레임워크의 인터페이스로 Spring MVC 처리에 대한 구성 설정을 가능하게 해주는 인터페이스이다.

 

이 인터페이스를 상속받는 클래스를 만들어서,

ddResourceHandlers 메서드 오버라이드를 통해 정적 리소스를 관리하는 것이다.

 

package com.kosta.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/img/**").addResourceLocations("file://C:\\Users\\WD\\Desktop\\images\\");
	}

}

 

이 부분이 바로 webConfigurer를 상속받은 클래스이다.

 

addResourceHandler는 웹에서 접근할 url 경로를 뜻하고,

addResourceLocations는 실제 파일이 존재하는 경로이다.

 

localhost:8080에서 보면 src의 경로가 나온다.

저기 하이라이트한 부분이 바로 img의 경로를 나타낸다.

/img/로 지정해주었기 때문에 img/뒤에 기존에 저장된 파일 경로를 나타내고, 이를 통해

이미지를 구현할 수 있다.

 

 

그리고 html 파일도 수정해야 한다.

 

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
            <div class="col" th:each="f: ${community.fileList}">
                <div class="card shadow-sm">
                    <img th:src="@{ '/img/' + ${community.fileList[0].storedFilePath}}" th:alt="${community.fileList[0].originFileName}" />
                </div>
            </div>
        </div>

 

이렇게 이미지 경로를 제대로 해주어야 이미지가 제대로 나타날 수 있다.

 

 

그러면 화면에

 

이렇게 잘 나오게 된다.

 

 

---

공식문서

https://docs.spring.io/spring-boot/docs/current/reference/html/features.html#features.developing-web-applications.spring-mvc.static-content

https://docs.spring.io/spring-boot/redirect.html?page=features