리액트에서 이미지 불러오기

<img src='../../img' alt=''/>

리액트에서 src속성을 사용한다면?

리액트에서 src속성을 사용하기 위해서는 import가 필수적이다. import를 통해 해당경로를 변수에 담아주고, 변수를 src속성값으로 사용한다.

import 변수명 from '../이미지경로/파일명.확장자';

위 방법을 쓰지 않고 이미지 경로를 바로 src에 넣어봐야 화면에는 아무것도 출력되지 않는다.
왜? 이렇게 되지? 생각이 들면 리액트의 규칙이라 이해하자.

나의 경우 인스타그램API 연결 전 Data.json에 이미지경로를 로컬로 했을때 생긴 오류?였다. 로컬에 이미지를 저장하지 않고 인스타그램 피드URL을 Data.json에 담아 해결했다.

꼭 로컬의 이미지를 사용한다면 Import 하여 사용하고, 아니라면 서버 URL을 사용하자!

public폴더에 Img폴더넣기 XXX

위 문제로 고민하다, 이미지 폴더를 public에 옴겼다. 왜그런지 정확히는 모르겠지만 사진이 정상적으로 출력되었다.
멘토님께 public폴더에 img폴더를 옮기고 작업해야 하는지 물었고, 대답은 NO!
public폴더에는 서버에 올릴 파일만 담도록 한다.