styled-components 사용해서 bgImage 넣기!

import LogoSrc from './assets/logo.png';

/* ... */

const LogoDiv = styled.div`
  background-image: url(${LogoSrc});
  /* width and height should be set otherwise container will have either have them as 0 or grow depending on its contents */
`;

/* ... */

<LogoDiv />

 

../assets/images/lala.jpg 로 했는데도 이상하게 안됐다!

 

이미지를 import 시켜와서 url에 넣어두고 width와 height을 주면 그제서야 잘 나오는 것 같다!

→ 왜? width와 height 값을 설정해주지 않으면 컨테이너가 0으로 설정되거나 컨테이너의 내용에 따라 변화한다! (auto가 되므로)

 

styled-components는 이미지를 import 해서 시키는 것을 권장한다! 정석이다!