[TIL] React Dynamic routing 사용시 이미지 불러오기 실패

이 문제는 간단한 게시판을 만들면서 발생하였다.

사건의 순서는 다음과 같다.

 

 

우리는 Header에 Home버튼을 이미지파일로 만들고 파일 경로는 Public에 img폴더를 하나 만들어서 이미지 파일을 넣어두었었다.

홈버튼 이미지

그리고 경로는 아래처럼 잘 입력 되었다.

잘 찾아 들어가진 경로

 

경로가 틀린것은 아닌게 다른 페이지에서는 잘 작동 하다가 Dynamic routing 주소로 입력되면 이미지 경로를 못찾는 문제가 발생 하였다.

 

문제의 url

예를들어 게시글마다 상세페이지가 존재하는데 우리는 /detail/1  혹은   /detail/2  이런식으로 디테일 뒤에 게시글 아이디가 붙도록 경로를 만들어 두었다.

저런 :id 값이 없는 페이지에서는 이미지가 잘 불러와졌지만, :id 처럼 다이나믹 라우팅이 사용된 페이지는 이미지가 불러와 지지 않았다.

---

해결방법

 

기술매니저님에게 여쭤보니 이미지파일을 넣어두고 임포트를 해와서 임포트한 이름으로 넣으면 된다고 했다.

Header 컴포넌트에 해당 이미지를 원하는 이름으로 임포트

1. Header 컴포넌트에 해당 이미지를 원하는 이름으로 임포트한다.

임포트한 이미지를 불러다 쓴다.

2. 임포트한 이미지를 src에 잘 입력하면 문제가 해결 된다.

---

사실 아직도 왜 다이나믹 라우팅 페이지에서 이미지가 불러와지지 않는 이유는 모른다. 다른 대책만 찾았을 뿐이다. 이에 대해서는 꼭 찾아놓고 싶다. (마치 별것 아닌데 간단한 동작 원리를 몰라서 이해 못한 기분이라 알아내고 싶은 마음이다.)