[오류해결] 로컬에 있는 이미지 파일 JSP에서 사용하기

🙅🏻‍♂️ 오류발생

Springboot와 JSP를 사용하는 과정에서 외부 리소스(로컬에 저장되어있는 이미지 파일)를 JSP의 <img> 태그의 src로 사용하려고 했는데, 경로를 잘 지정해줘도 x박스가 계속 뜨는 문제에 직면

 

기존에 사용하던 방법은 다음과 같습니다. application.yml에서 file에 대한 경로를 커스텀하기 위한 설정을 먼저 진행했습니다.

// application.yml

file:
  path: /User/username/IdealProjects/imageStorage

/User/username/IdealProjects/imageStorage 라는 경로에 있는 폴더에 이미지 파일을 저장하기 위해서 커스텀해놓은 것이다. 이렇게 application.yml에 넣어두면 @Value("${file.path}")로 어디서든 가져다 쓸 수 있다.

 

// Image.java

@Entity
public class Image {
    ...
    
    private String imageName;
    
    ...
}

내가 만들었던 Image 클래스에는 사진 파일이름을 저장할 수 있는 imageName이라는 필드가 존재한다. 예를 들어 사진 파일이름이 A.jpg라고 하면, 위에 설정된 경로인 /User/username/IdealProjects/imageStorage에 A.jpg를 저장한다.

 

이제 이 Image를 사용하고자하는 photo.jsp에서 사용하기 위한 Controller 작업을 해줬습니다.

// ImageController.java

@Controller
public class ImageController {
    @GetMapping("/photo/{id}")
    public String photo(@PathVariable int id, Model model) {
        Image img = imageRepository.findById(id).orElseThrow(() -> {
            throw new CustomException("찾으려는 파일은 존재하지 않습니다.");
        });
        
        model.addAttribute("image", img);
        
        return "photo";
    }
}

가져 오려는 사진을 Repository에서 찾아서 Model에 넣어서 photo.jsp에서 사용할 수 있게 전달해줬습니다.

 

이제 photo.jsp에서 /User/username/IdealProjects/imageStorage/{이미지 파일 이름} 이라는 경로를 src에 넣어주면 된다. 하지만 이미지 파일을 가져올 때 사용되는 앞 부분 경로는 우리가 이미 앞에 application.yml에 설정해놨기 때문에 이를 스프링에서 사용할 수 있도록 WebConfig를 사용해줄 수 있다.

 

// WebMvcConfig.java

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Value("${file.path}")
    private String filePath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        WebMvcConfigurer.super.addResourceHandlers(registry);

        registry
                .addResourceHandler("/image/**")
                .addResourceLocations("file:///" + filePath);

    }
}

WebMvcConfigurer을 상속받으면 스프링 Web 설정파일로서 작동이 되고, @Configuration을 적어주면 IoC 컨테이너에 빈으로 등록해놓을 수 있다. 

 

이제 @Value("${file.path}")를 사용해서 application.yml에 있는 커스텀 파일 경로의 값을 filePath에 넣어준다. 이제 addResourceHandlers()를 오버라이딩하고, addResourceHandler("/image/**")를 써서 /image/ 경로로 설정된 요청이 온다면, addResourceLocations("file:///" + filePath)를 써서 "file:///User/username/IdealProjects/imageStorage"로 바꿔서 작동된다는 설정이다.

 

이제 설정은 끝났으니 photo.jsp에서 이미지 파일을 사용해보자.

// photo.jsp
...

<img src="/image/${image.imageName}" />

...

로컬에 있는 파일을 가져오기 위해서 위와 같이 src 경로를 넣어줬습니다. 근데 사진은 x 박스 쳐지면서 가져오질 리소스를 가져오지 못했다. 찾아보니 보안상으로 웹 브라우저에서 로컬 리소스에 Get 요청을 할 수 없다는 거 같다는 내용이 많이 보였다. 자세한 원인을 찾고 싶었는데 아직 찾지 못했다... 만약 어쩌다 이 글을 읽게되시는 고수분이 있으면 알려주셨으면 좋겠다.

 

 

 

🙆🏻‍♂️ 문제해결

jsp에서 외부 리소스를 사용하기 위해서 구글링하다 해답을 찾았다. 스프링 태그 라이브러리(tglibs)를 사용하는 것이다. 먼저 jsp의 Header에 다음 코드를 추가한다.

// photo.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

...

spring이라는 prefix로 해당 기능을 사용할 수 있게되었다. 이제 이 <spring:>태그로 위에서 설정해줬던 url을 수정해볼 것이다.

 

// photo.jsp
...

<img src="<spring:url value='/image/${image.imageName}' />" />

...

이렇게 <spring:url />로 Url을 재설정해주니 사진이 정상적으로 가져와지는 것을 확인할 수 있었다.