React : 리액트에서 이미지 추가하기(초간단)

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 + '경로'} />