🙅🏻♂️ 오류발생
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을 재설정해주니 사진이 정상적으로 가져와지는 것을 확인할 수 있었다.
'🧑🏻💻 Dev > 오류해결' 카테고리의 다른 글
| Mustache 사용해서 html 파일 읽을 때 한글 깨짐 (0) | 2023.06.08 |
|---|---|
| [오류해결] IntelliJ 커스텀 properties 자동완성 안되는 오류 (0) | 2023.04.27 |
| [오류해결] No serializer found for class (InvalidDefinitionException) (0) | 2023.04.20 |
| [오류해결] JSP img GET 요청 시 한글 깨짐 (0) | 2023.03.14 |
| [MAC M1] MariaDB ERROR 2002 (HY000): Can't connect to local server through socket '/tmp/mysql.sock' 해결 (3) | 2023.02.28 |
