문제상황
위 이미지와 같이 카카오 로그인 이미지는 intelliJ에서 깨짐없이 잘 보인다. 아래의 사진은 서버를 동작 시킨 후 같은 페이지에 접속한 것이다.
원인
개발자 모드에서 보면 이미지를 불러오지 못하기 때문에 이미지가 브라우저에서 보여지지 않는다.
해결방법
먼저 구현된 파일을 봤을 때 img src 태그를 제대로 불러오지 못하는 것으로 보인다. 정적 이미지 소스의 주소를 매핑하는 과정이 필요하다.
</style>
<body>
<div class="login-container">
<h1>StudyPro</h1>
<a th:href="${url}">
<img src="../static/images/kakao_login_medium_wide.png" alt="Kakao Logo">
</a>
</div>
</body>
</html>먼저 WebConfig에 addResourceHandlers 메서드를 오버라이드한다.
addResourceHandlers란?
정적 리소스를 처리하기 위해서 사용하는 리소스 핸들러로, 사용자가 요청하는 URL과 해당 URL에 매핑된 리소스의 실제 위치를 연결해준다.addResourceHandler
/static/images 경로(정적 이미지 가져오는 경로)를 이 핸들러에 매핑한다.addResourceLocations
요청된 리소스를 찾기 위한 실제 경로를 지정한다.
@Configuration
public class WebConfig implements WebMvcConfigurer {
// 정적 이미지
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/images")
.addResourceLocations("file:src/main/resources/static/images");
}
}그리고 html 파일에서 src 위치를 /images 경로로 수정해서 사용하면 정상적으로 동작한다!!
</style>
<body>
<div class="login-container">
<h1>StudyPro</h1>
<a th:href="${url}">
<img src="/images/kakao_login_medium_wide.png" alt="Kakao Logo">
</a>
</div>
</body>
</html>서버를 재시작해서 접속하면 아래와 같이 잘 나오는 것을 볼 수 있다. 단... intelliJ에서는 이미지가 깨져서 보인다ㅠㅠ
백엔드 개발자를 시작으로 도메인 이해도까지 풍부한 개발자가 목표입니다!