react 이미지 경로 문제

문제

Card.js 에서 해당 경로로 이미지를 불러오려고 했다.

<img src={`assets/img/main/064/${folder}/${item.image[0]}`} alt="thumbnail"/>

하지만 이미지를 불러오지 못하고 alt 가 출력되었다.

시도

혹시 백틱이나 변수에 대한 오류가 아닐까했지만

<img src="assets/img/main/064/064_1.png"/>

결과

출력되지 않았다.

시도

• 이상한 점은 같은 경로에 위치한 다른 컴포넌트에는 같은 경로로 이미지를 불러오는데 문제가 없었다.
• 이미지 출력자체가 되지 않는 건가 싶어 웹에 있는 이미지 링크를 붙혀 주었는데 출력되었다.
• 이미지 출력에도 문제가 없고 alt가 출력된다는 것은 이미지를 불러올 수 없다는 것인데 다른 컴포넌트를 통해 경로에도 이상이 없음을 확인했지만 출력은 되지 않았다.
• 이래저래 머리를 싸매다 경로 맨앞에 '/' 를 붙혀주었는 데 해결되었다(?)

결론

같은 위치의 다른 컴포넌트 이미지 코드
<img src="assets/img/main/064/064_1.png" alt="여행지이미지" />
Card.js 의 이미지 코드
<img src="/assets/img/main/064/064_1.png" alt="여행지이미지" />

다른 컴포넌트에서는 /assets/ 든 assets/ 든 모두 접근이 가능했으나
Card.js 에서는 /assets/ 으로만 접근이 가능했다. 같은 위치의 컴포넌트 지만 상황에 따라 assets/ 으로 접근하는 것이 불안정했다.