React
[React] HTML, CSS로 이미지 첨부, public 폴더 이용하는 법
dong_su
2023. 12. 16. 11:28
HTML
import img from "./img/bg.png";
<div className='main-bg' style={{backgroundImage : "url(" + img + ")" }}></div>
- 현재 폴더인 src에 img라는 폴더를 만들고 그 안에 이미지 파일을 첨부한 후 import 한다.
- 쓸 위치에 가서 style={{backgroundImage : "url(" + 이름 + ")" }} 해주면 된다.
CSS
.main-bg {
height: 300px;
background-image: url("./img/bg.png");
background-size: cover;
background-position: center;
}
-> 쓸 태그에 className='작명' 후 css 파일로 간 후 .작명 { } 안에 url(이미지경로)를 넣어주면 된다.
public 폴더 이용하는 법
<img src={process.env.PUBLIC_URL + '/logo192.png'} />
-> import 필요 X , 위 코드 + /파일명 해주면 된다.
-> 잘 올라간 모습