[React.js] 리액트 이미지 사용 / react img src

리액트 프로젝트에서 <img> 태그를 사용할 때 src를 잡는 법은 두 가지가 있다.

1.public 폴더에 저장 -> 상대경로로 잡기

2.src 폴더에 저장 -> import 를 이용하기

 

src 폴더에 저장할 경우 상대경로로 바로 접근할 수가 없다. 원인은 아직 모르겠다.

 

1. public 폴더에 저장 -> 상대경로로 잡기

public 폴더에 저장할 경우 위와 같이 바로 상대경로를 이용해서 가져올 수 있다. 이미지가 static file로써 저장됨으로서 가능하다고 한다. 이렇게 할 경우 import 를 여러번 할 필요도 없고, 어떤 변수에 대해 해당 변수의 이미지들을 편하게 가져올 수 있다.

 

2. src 폴더에 저장 ->import를 이용하기

위와 같은 방식으로 src 자체에 이미지를 저장하고, import 를 통해서 사용할 수도 있다.

 

그 외에 절대 경로로 잡는다던가 할 수도 있다고 하던데, 절대경로로 이미지를 끌어올 일이 있을까 싶다. 우선 그것들은 보류.