Next js styled-component background-image import 에러

기존 리액트에서 next js 로 이전하는 과정에서 import 한 img를 styled component로 사용하려고 했는데 화면에 불러지지 않는 오류가 있었다.

이래 저래 검색하며 결과 대로 해보았지만 전혀 문제가 해결 되지 않았다.

기존 Styled compoent에서 사용했던 방법

Import bg from ‘경로 ’ 

Const BGSection = styled.section`
Background-image: ${bg}
`

에시이기 때문에 이름등은 대충 지었다. 아무튼 이런방식으로 기존 리액트에서 사용해왔었는데

Next js 에서 이와 같이 사용했을때 이미지를 읽지 못했다.

시도한 내용

그래서 props로 전달을 해줘야 하나 해서 태그에 props설정을 해주었고 styled component에
props를 전달해서 읽혀주었다.

예)

Const BGSection = styled.section`
Background-image:  ${props => props.img}
`

라이브러리를 설치해보고 이런저런 방법을 실행해봤지만 해소 되지 않았다

두번째로 실행한 방법은 태그에 style 태그를 줘서 넣어봤다.

Style = {{backgroundImage:’경로’}}

Import 한 값도 넣어보고 require를 활용해서 경로를 넣어줘도 읽지 못하였다.

결국 해소한 방법은

스타일 부분에 url 해서 경로를 집적 입력하는 방법으로 해소했다.

 background-image: url('/images/emptyCheckBox.svg');

기본 경로를 public으로 잡고 있는 듯하다.
그래서.public에 images 폴더를 만들고 그 경로에 넣어준다.
뭔가 기본적인 방법이긴 하지만 해소하는데 시간이 조금 들었다.

왜 props설정을 읽지 못하는지, 바로 전달해도 읽지를 못하는 지 확인해봐야 겠다
추가적으로 next/images 에 대해 서도 알게 되었는데 나중에 정리해보도록 하겠다.