React - Image 넣기

리액트에서 이미지 넣는법

css 파일에서 넣을때는 평소와 똑같이 url(이미지 경로) 같은 방법으로 하면 됩니다.

 

하지만 리액트에서 넣을 때는 항상 import 를 먼저 해줘야합니다. 그 다음에 import 할 때 정했던 변수명으로 사용해야합니다.

 

그런데 import 를 사용하게되면 문제점이 이미지가 100개 있으면 import 를 100개 해야한다는 의미인데 그러면 너무 비효율적일 수 있습니다. 그래서 import 말고도 또 다른 방법으로 public  폴더를 이용하는 방법이 있습니다.

• 리액트가 배포될 때는 src 폴더에 모든 파일이 압축되어서 배포되기때문에 파일명이 변하거나 합니다. 그러나 public 폴더에 있는 파일들은 압축이되지 않고 배포되기 때문에 public 폴더에 있는 파일을 import 없이 가져다 쓸 수 있게 됩니다.
• public  폴더에 있는 파일을 사용할 때의 경로는 / 부터 시작하는 절대경로를 사용하면 됩니다.

 

• 그런데 만약에 서브경로 ( 메인경로/서브경로/img.png ) 에다가 발행했을 때는 경로가 달라질 수 있기 때문에 아래와 같이 작성해줘야합니다.( 리액트 공식문서 참조 )

// 예시
<img src={process.env.PUBLIC_URL + '/이미지 경로'}/>