[React] HTML, CSS로 이미지 첨부, public 폴더 이용하는 법

HTML

 

import img from "./img/bg.png";

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

1. 현재 폴더인 src에 img라는 폴더를 만들고 그 안에 이미지 파일을 첨부한 후 import 한다.
2. 쓸 위치에 가서 style={{backgroundImage : "url(" + 이름 + ")" }} 해주면 된다.

---

CSS

 

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

-> 쓸 태그에 className='작명' 후 css 파일로 간 후 .작명 { } 안에 url(이미지경로)를 넣어주면 된다.

---

public 폴더 이용하는 법

 

public 폴더

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

-> import 필요 X , 위 코드 + /파일명 해주면 된다.

---

-> 잘 올라간 모습