2023-04-20

이미지 넣는 법 & public 폴더 이용하기

1. css 파일에 넣는 법

<div className='main-bg'></div>

.main-bg{
  height: 300px;  
  background-image : url('./img/bg.jpg'); //이 부분에 경로를 넣어주면 된다.
  background-size : cover;
  background-position : center;
}

2. html 파일에 바로 넣는 법

import 작명 from './이미지 경로;

 <div className='main-bg' style={{backgroundImage : 'url('+ 작명 +')' }}></div> //jsx에서 쓰는 문법이다

img태그 쓰고싶으면 아래처럼 쓰면 됨.

<img src={bg}/>

하지만 많은 사진을 위처럼 하나 하나 하기는 어려운 법
그리고 src는 폴더에 있던 코드와 파일이 다 압축이 된다.
그래서 public 폴더에 이미지를 넣어 사용하는 방법이 있다.

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

abcde.com 경로에 배포하면 아무런 문제가 없지만
abcde.com/어쩌구/ 경로에 배포하면
/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있음.
그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다.