[React] 이미지 넣기

 

 

1. css파일에 이미지 넣어서 사용하기

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

 

 

2. html에 직접 이미지 넣기

import bg from './bg.png';

div className="main-bg" style={{ backgroundImage : 'url('+bg+')'}}></div>

 

 

3. public 폴더에 이미지 넣어서 사용하기

- 이미지 같은 static 파일의 경우 public 폴더에 보관해도 됨 - public 폴더에 이미지를 저장하면 리액트 프로젝트 빌딩(html, js, css 압축) 시 압축 되지 않음

 

1) 간단한 사용방식

<img src="/{이미지명}" />

 

2) public 폴더의 이미지를 사용하는 권장 방식(배포할 때)

<img src={process.env.PUBLIC_URL + '/{이미지명}'} />