동적 페이지를 사용할 때 이미지가 제대로 로드되지 않음

1. 상황과 문제점

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

이런 부분이 있는데 공용폴더에 이미지를 넣어두었습니다.

현재 페이지가 동적이지 않은 경우

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

두 번째 코드와 같은 동적 페이지로 변환할 때,

이 괴물이 탄생했습니다.

일단 별표가 필터색깔의 검은별 PNG 파일이라 이상하게 바뀌는 것 같습니다.

이미지가 없을때 나타나는 아이콘에 필터가 적용되었습니다…

두 번째 원인

이미지 로딩과 같이 동적 페이지를 사용할 때

src=”http://ym0423.m/img/image.png” 그런 식으로 로드가 안되는 것 같아요.

나는 이유를 모른다.

이것이 webpack과 어떤 관련이 있습니까?

3. 해상도

process.env.PUBLIC_URL을 추가하여 로드했습니다.

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

4. 느낀 점

바쁜데 일이 안풀려서 짜증나네요.

바빠서 원인을 못찾고 그냥 놔둡니다. 여유가 있을 때 원인을 찾아야 합니다.

모르면 나중에 또 귀찮아진다.