리액트내에서 이미지 상대경로 불러오는 방법. react의 img src

리액트에서 이미지를 불러오는 걸 시도했다.

 

json파일에 이미지 경로를 넣고 

그 경로를 화면에서 img 태그의 src에 넣어줬는데, 

이미지를 제대로 불러오지 못하는 현상이 발생되었다.

다양한 경로를 시도해봤으나 실패.

 

상대경로다보니 어느곳을 기준으로 잡아야 할 지 감이 안왔다.

App.js인지, index.html인지, json인지 직접 뿌려주는 화면인지..

---

 

 

 

기준은 index.html이 되는 것이 맞다.

 

나는 src안에 img 폴더를 두고 그걸로 사용했는데, 이렇게 하면 안된다.

 

 

ondex.html이 위치한 public 내에 이미지 폴더를 넣어서 사용해줘야 한다.

 

이렇게 하면 src - data내의 json파일에서

"../img/place/2-01.jpg"

이런형태로 경로를 넣어주면 json을 뿌려주는 곳에서 정상적으로 보여진다.

 

main.jsx에서 바로 불러올 때에도 이런식으로 쓰면 보여진다.

 

사용할 이미지가 한두개 라면 어디에 위치해 있건간에 

import를 사용해서 처리가 가능했겠지만, 

이미지는 이미지 폴더에 넣어주는 것이 중요할 듯하다.

 

폴더구조를 따로 잡아본 적이 없다보니 이런 실수가 발생되었는데,

data폴더는 import로 불러오기 때문에 저렇게 배치를 하긴 했는데, 

다른 사람 프로젝트로 구경해봐야겠다.

 

img태그에서 막힐 줄은 상상을 못했는데,

아직도 배울게 너무 많다 ㅎㅎ