React에서 이미지 경로를 설정하는 방법

1. src 폴더에서 이미지를 import

1-1. src 폴더 밑에 이미지 넣기

• src 폴더 안에 넣는다고 자동적으로 image가 import 되지 않음
• js 안에 import 경로 설정해야 함
  

1-2. import 경로 설정하기

• js 안에 import 경로 작성
  import imgLogo from './imgTest.jpg';
  • import문 안에 경로 설정하고 변수 지정하기

1-3. img 태그 사용해서 이미지 연결하기

• <img> 태그 안에 src={imgLogo}로 이미지를 연결함

function App() {
  return (
    <div>
    	<img src={imgLogo} alt='logo image' />
    </div>
  );
}

• src는 'imgLogo'로 하면 안됨
  • 왜냐하면 src='imgLogo'는 /imgLogo 경로로 찾아가기 때문에 오류 발생
• js에서 변수를 전달할 때는 {} 안에 넣어야 함

2. css의 background-image 이용

2-1. src 폴더에 이미지 넣은거 활용

2-2. css 파일에 경로 설정

App.css

.image-bg {
  height : 300px;
  background-image : url('./imgTest.jpg');
  background-size : cover;
  background-position : center;
}

• background-image에 url을 통해 src 파일의 이미지를 연결함

2-3. html에 css 연결

App.js

function App() {
  return (
      <div className="image-bg"></div>
  );
}

• className에 css에서 설정한 이름을 연결함

3. public 폴더에서 가져오기

3-1. public 폴더에 이미지 넣기

• public 폴더에 있는 이미지는 import문 작성 안해도 됨
  • 왜냐하면 public 파일 안에 있는 이미지는 서버와 통신이 가능함
  • url에 http://localhost:3000/img/imgTest.jpg라고 입력하면 열림
• 이러한 static 파일은 public 폴더에 저장해도 됨
  • 작업이 끝난 후, 리액트를 build하면 src 폴더는 압축되지만 public 폴더는 그대로 보존함

3-2. <img> 태그에 연결하기

function App() {
  return (
    <div>
        <img src="/img/imgTest.jpg" alt='logo image' />
    </div>
  );
}

• <img> 태그 안에 src에 이미지 경로를 연결함

만약 나중에 서버로 배포한다면

<img src={process.env.PUBLIC_URL + '/img/imgTest.jpg'} alt='logo image'/>

• process.env.PUBLIC_URL를 붙여야 함
  • 배포할 때 'www.사이트.com'의 경로에서 'www.사이트.com/세부파일'로 될 경우 이미지 파일을 찾기 어려울 수 있음

해당 내용은 다음 자료를 참고했습니다.
https://daveceddia.com/react-image-tag/
https://create-react-app.dev/docs/using-the-public-folder/