동적페이지 사용 시, 이미지를 제대로 불러오지 못하는 현상

1. 상황 및 문제

야놀자 홈페이지 클론 코딩 중,

이런 부분이 있는데, public 폴더에 이미지를 넣어뒀다.

지금은 동적페이지가 아닌 상태일때이지만,

<Route path='/detail' element={<ProductDetail />} />
<Route path='/detail/:id' element={<ProductDetail />} />

두번째 코드와 같이 동적페이지로 변환시켰을때,

이런 괴물이 탄생한다.

일단 별표는 검은색 별 png 파일을 filter로 색깔 입힌거라서 기괴하게 변하게 되는거같다.

이미지가 없을때 뜨는 아이콘에 filter가 입힌 꼴이 돼서...

 

 

2. 원인

 

동적페이지를 사용하면 기존에 이미지를 로딩하듯이

src="img/image.png" 이런식으로 로딩을 할 수없는 것 같은데

그 이유는 모르겠다.

웹팩이랑 뭐 관계가 있는건가..?

 

 

3. 해결

 

process.env.PUBLIC_URL 를 붙여서 로딩했다.

src={process.env.PUBLIC_URL+'/img/star.png'}

 

 

4. 느낀점

바빠죽겠는데 귀찮게 군다.

해야할게 많아서 원인을 못 찾고 그냥 넘어가는데..

한가해지면 원인을 알아내야겠다.

이대로 쓰자니

process.env.PUBLIC_URL 타이핑이 너무 귀찮다. 문자도 긴데 쉬프트도 많음