HTML 이미지 깨짐 현상 - 파일 경로 확인하기

웹 개발 프로젝트 진행 도중, 이미지가 가끔씩 안보이는 현상이 나타났다.

 

다음과 같이 상단바에 로고 이미지가 있어야하는데, 어째서인지 가끔씩 이 이미지만 로컬, 배포본에서 모두 안보였다.

정상적인 모습

 

가끔 이미지가 안보임

 

계속 원인을 찾던 결과, React-Router 함수인 useNavigate를 사용하여 이동한 페이지에서만 로고가 안보인다는 것을 발견했다.

 

미리 말하자면, 해당 함수에 한해서 나타나는 현상이 아니라, 한 페이지에서 해당 페이지 경로 안으로 들어간 경우 모두 적용되는 문제인 것 같다.  

게시글의 디테일 화면.

위 이미지는, 공지 게시글 목록(/notice)에서 한 게시글의 디테일 화면(/notice/21)으로 넘어간 화면이다.

처음에는 로고가 잘 보이지만 새로고침을 하면 로고가 깨진다.

 

개발자 모드로 확인해보면 이미지 경로가 이동하기 이전의 페이지 정보를 바탕으로 설정되고 있다.

개발자 모드에서 확인한 이미지 경로

기존엔 이미지 코드를 다음과 같이 작성했다(React로 작성된 코드다.)

이미지 코드

해당 코드를 간단히 표현하면 다음과 같다.

<img src="assets/logo.png/>

assets/logo.png 는 현재 경로를 기준으로 해서 홈 페이지(공지 게시글 목록)의 경우를 가리키고

/assets/logo.png 는 디테일 페이지의 경우를 가리킨다.

 

이미지 경로를 다음과 같이 상대경로로 수정해주면 해결이 된다.

<img src="/assets/logo.png/>

 

 

파일 경로에 대해 정리해보자면 다음과 같다.

나의 상황 같은 경우, 로고를 항상 assets 폴더에 있는 logo.png를 가져오고 싶으므로 3번째 경우의 경로처럼 작성하면 되는 것이다.

Path	Description
<img src="picture.jpg">	"picture.jpg" 파일은 현재 페이지와 동일한 폴더에 있다.
<img src="images/picture.jpg">	"picture.jpg" 파일은 현재 폴더의 이미지 폴더에 있다.
<img src="/images/picture.jpg">	"picture.jpg" 파일은 현재 웹의 루트에 있는 이미지 폴더에 있다.
<img src="../picutre.jpg>	"picture.jpg" 파일은 현재 폴더보다 한 레벨 위의 폴더에 있다.

 

위 내용에 대해선 아래 링크에서 자세히 확인할 수 있다.

HTML File Paths