CSS로 이미지 추가하기
height: 300px;
background-image: url(경로);
background-size: cover;
background-position: center;
- html에 id나 class 지정하고, css로 이미지 추가하기.
HTML로 이미지 추가하기
1. import 하기.
import 작명 from '이미지경로';
2. html 코드 추가
import './App.css';
import 작명 from '이미지경로';
function App() {
return (
<div className="App">
<div className='main-bg' sytle={{backgroundImage:"url(작명)"}}></div>
</div>
);
}
- 이미지,txt.json 등 수정이 필요없는 static 파일의 경우 public폴더에 보관해도 된다.
이 경우, import 할 필요 없고, 경로만 입력해주면 된다.
- 그러나 배포 시 생길 수 있는 오류에 대비하여 아래와 같이 입력한다.
<img src={process.env.PUBLIC_URL + '경로'} />