이번에 프로젝트를 진행하다가 아이콘을 사용하기 위해 svg 파일을 css background:url()로 불러와서 사용한 적이 있다.

그런데 로컬환경에서는 제대로 불러와지던 svg 파일들이 build를 하고 난 후, 확인해보니 불러와지지 않는 것을 확인하였다.

그래서 찾아보니 Vite에서는 다음 asset을 가져오기 위해 2가지 방법을 사용한다고 한다.

Vite에서 assets 가져오기

1. URL을 통해 가져오기

1
2

import imgUrl from "./img.png";
document.getElementById("hero-img").src = imgUrl;

• Webpack의 file-loader와 비슷한데, 차이점이 있다면 Vite는 절대경로와 상대 경로 둘 다 사용가능하다.
• 일반적인 이미지, 미디어, 폰트 파일 타입은 자동으로 asset 목록에 포함된다.

2. public 디렉터리에서 가져오기

• robots.txt 같이 소스 코드에서 참조하지 않는 asset
• 해싱 없이 항상 같은 이름을 갖는 asset
• URL을 얻기 위해 굳이 import 할 필요가 없는 asset

위 3가지의 경우에는 public 디렉터리에 asset을 위치시킨다. 이곳에 위치한 asset은 개발 시 / 경로에, 배포시에는 dist 디렉터리에 위치한다.

1
2
3

.arrowDown {
  background-image: url("/assets/img/Arrow.svg");
}

• public 디렉터리에 있는 asset을 가져올 경우에는 항상 루트 기준으로 하는 절대경로에서 가져와야한다. (public/Arrow.svg asset은 소스 코드에서는 /Arrow.svg으로 접근 가능하다.)
• public 디렉터리에 있는 asset은 JavaScript로 가져올 수 없다.

가급적 import를 사용하자.

React Router를 사용하여 중첩 라우팅을 구현하였다.

/mypage/history 라우팅에서 Header 컴포넌트를 불러왔다.

Header 컴포넌트에는 public 폴더에서 불러온 logo가 있다.

하지만 이 때의 경로는 /img/logo.svg 였기 때문에 /mypage/history 라우팅에서는 해당 경로의 파일을 찾을 수 없다.

해당 경로의 파일을 찾기 위해서는 /mypage/history/img/logo.svg 로 경로를 바꿔줘야 한다.

즉, public 폴더에서 이미지를 가져올 경우, 라우팅이 바뀔 때마다 경로를 생각해줘야한다.

그러므로 import 구문을 사용하여 src 폴더 안에 이미지를 가져오도록 하자.

댓글 공유