[ React ] 컴포넌트에 background-image 가 적용되지 않는 오류 해결

❗에러 상황

const StLayoutImage = styled.div`
  background-image: url('/assets/backgroundimg.png');
  `

로그인 페이지에 background-image를 넣기 위해 styled-components에 background-image를 알맞은 경로로 넣어도 컴포넌트 백그라운드에 어떠한 사진도 뜨지 않는다.

 

import backgroundimg from "assets/backgroundimg.png"

return (
    <StLayoutImage image={backgroundimg}>
    	//로그인 로직
    </StLayoutImage>
    );

assets 폴더에 있는 backgroundimg를 import 해와 직접 컴포넌트에 이미지를 넣어도 뜨지 않았다.

 

💡해결 방법

// 이미지 임포트 해주기
import backgroundimg from 'assets/backgroungimg.png';

....

const StLayoutImage = styled.div`
// 임포트한 것을 변수로 넣어주기
  background-image: url(${backgroundimg});
`;

public에 있던 backgroundimg를 assets 폴더로 옮기고, backgroundimg를 임포트 해와서, 하단 스타일드 컴포넌트의

background-image: url( ${ backgroundimg } ) 이런 식으로 변수로 넣어주었더니 간단하게 해결할 수 있었다.