이미지 프로젝트에 가져오기

1번째 방법

src/assets/img 폴더 안에 이미지들을 넣기

import Logo from '../../../assets/img/Logo.svg';

<LogoContainer src={Logo} alt="로고" />

근데 이렇게 하면
매번 import 한 줄씩 쓰는 게 번거로움

2번째 방법

public/images 폴더 안에 이미지들을 넣기

const Logo = styled.div`
  background-image: url("/images/Logo.svg");
  background-size: cover;
  width: 22px;
  height: 22px;
`;

스타일드 컴포넌트에 백그라운드 이미지 url로 경로 적어주면 됨

백그라운드 이미지 아니고 그냥 이미지는

const Stamp = styled.img.attrs({
  src: "/images/우표.svg",
  alt: "우표임",
 })`

  width: 84px;
  height: 112px;
`;

아마도 이렇게 인 듯.

---

이미지 넣을 때 보통 svg 파일 넣는 이유

그 이유는 png는 확대하면 깨지지만,
svg는 벡터를 써서 확대해도 깨지지 않기 때문.

---

이미지가 꽉 안 채워질 땐 cover

png를 4x로 export하는 경우나, svg를 넣었을 때
컨테이너에 백그라운드 이미지가 잘 안 맞으면

background-size: cover;

쓰면 웬만하면 해결된다.

백그라운드가 아닌 그냥 이미지는

object-fix: cover;

쓰면 됨.