이미지 삽입하는 방법

이미지를 삽입하는 방법

방법 ①. App.css 파일에 이미지 경로 지정

//App.js
<div className='main-bg'> </div>

 

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

 

 

방법 ②. App.js 파일에 이미지 경로 지정

import './App.css';
import imgpath from './img/bg.png'

function App() {
  return (
    <div className="App">
      <div className='main-bg' style={{ background : 'url(' + imgpath + ')'}}></div>
    </div>
  );
}

export default App;

 

 

public 폴더에 이미지를 저장

여러가지 소스코드는 src 폴더에 보관하면 되는데  이미지같은 static 파일의 경우 public 폴더에 보관해도 됩니다.

리액트로 개발을 끝내면 build 작업이라는걸 하는데  지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. 

src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 

그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다.

 

public 폴더에 있는 이미지 사용할 땐

<img src="/logo192.png" /> 

그냥 /이미지경로 사용하면 됩니다. 편리하죠? 그래서 페이지에 이미지 100장을 넣어야하는 경우 public 폴더에 밀어넣으면 import 100번 안해도 되니 편리합니다. 

css 파일에서도 /이미지경로 사용하면 됩니다.

<img src={process.env.PUBLIC_URL + '/logo192.png'} /> 

하지만 권장되는 방식은 이렇게입니다. 왜냐면 리액트로 만든 html 페이지를 배포할 때 codingapple.com 경로에 배포하면 아무런 문제가 없지만 codingapple.com/어쩌구/ 경로에 배포하면 /logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있습니다. 그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다고 하는군요. 

codingapple.com/어쩌구/ 경로에 리액트로 만든 페이지를 배포할 일이 아예 없으면 굳이 안해도 됩니다.