react에서 이미지 경로 문제

Module not found: You attempted to import ../img/1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported

 

클래스 안에 이미지 태그를 넣어주고, 경로를 설정해줬는데 다음과 같은 문제가 발생했습니다. 이미지를 src폴더 밖에서 불러온게 문제라고 하는데, 뭐가 문제일까요?

 

이미지가 불려지는 경우는 다음과 같습니다.

 

 

1. 이미지 태그에 src속성으로 바로 설정

2. 맨 상단에서 이미지 자체 import

3. css 파일에서 backgound-imgae로 사용

 

 

 

2번과 3번의 경우 불러올 이미지가 src폴더 아래에 꼭 있어야 했고, 1번의 경우 pubilc폴더 아래(index.html과 동등하거나 하위 위치)에 있어야 했습니다.

 

 

 

정리:

js파일에 import하거나 css 파일에서 background로 사용되는 경우 모두, 컴파일시 이미지 자체도 포함되어 진행되기에  발생하는 이슈인듯 합니다. 그러나 Img태그에 src설정의 경우는컴파일이 완료된 이후에 public/index.html기준으로 이미지를 불러옵니다. 

 

cra(creat-react-app)에서 import로 엮인 js, css, img등등의 컴파일은 src파일 안에서만 이뤄진다는 사실을 잊지 않으면, import오류는 발생하지 않을듯 하네요^^