[React] styled-components에서 background-image 가 안 들어감

2022.7.27 (수) 작성

1. 에러❗️

styled-components에서 background-image로 이미지를 넣었는데 뜨지 않는다.

 

2. 상황

React 앱에서 styled-components 로 스타일링 중,

아래 같이 코드에 이미지 경로를 넣으면 배경 이미지가 안 뜬다.

background-image: url('../images/roomDetail/02_rooftop_1x_w3000.png');

3. 해결💡

styled-components에서 배경 이미지를 넣을 때는 두 방법 중 하나를 쓰면 된다.

1. src 폴더 안에 images 폴더가 있을 때

//이미지 임포트 시켜주고
import rooftopImg from '../images/02_rooftop_1x_w3000.png';

const BuildingStyle = styled.div`
...
  .rooftop {
    background-image: url(${rooftopImg});  /* 이렇게 변수로 넣어준다. */
  }
`;

2. public 폴더 안에 img 폴더가 있을 때

background-image: url('img/02_rooftop_1x_w3000.png');
//배포시에는 경로 앞에 process.env.PUBLIC_URL를 붙여야한다.