컨텍스트 패스(Context Path)란?WAS(Web Application Server)에서 웹어플리케이션을 구분하기 위한 path이다.
다시말해 상대적인 경로이다. 예를들어 JSP 에서 https://zontae.tistory.com/member/new 인 절대 경로가 있으면
<%=reqeust.getContextPath() %>/member/new처럼
/member/new를 상대적인 경로로 사용 할 수 있게 도와준다.
이러한 기능은 Thymeleaf에서 어떻게 사용할까.
타임리프는
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader" />
<img th:src = "@{img/error/500.png}" width="700px" height="500px">
<div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>
@{img/error/500.png} 와 같이 @{}를 사용하여 매핑해주면 상대경로로 자동적으로 매핑해준다.
위 코드로 에러페이지로 접속할때 이미지가 나오질않는다.
나오지 않는 이유는 상대경로로 지정했기 때문이다.
@{img/error/500.png} 로 지정했으니 에러가난 시점 URL에 상대경로가 되어
http://localhost:8080/delete/1/img/error/500.png 이렇게 되어 이미지가 나오지 않게 된다.
따라서
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader" />
<img src = "/img/error/500.png" width="700px" height="500px">
<div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>
<img src = "/img/error/500.png" width="700px" height="500px">
아래처럼 경로를 바꿔주면
http://localhost:8080/img/error/500.png
경로가 되어
static/img/error/500.png 이미지 파일을 읽을 수 있다.
정상적으로 작동한다.
'개발일기 > 프로젝트 일기' 카테고리의 다른 글
| HealthDuo - 쪽지 보내기 기능 (0) | 2022.07.15 |
|---|---|
| HealthDuo-java.sql.SQLIntegrityConstraintViolationException: Cannot delete or update a parent row: a foreign key constraint fails (0) | 2022.07.11 |
| HomeTheater - 결제 페이지 (0) | 2022.07.10 |
| HealthDuo-게시글 쓰기 (0) | 2022.06.28 |
| HealthDuo-home 화면 (0) | 2022.06.28 |
