[vite] assets 이미지 가져오기

이번 포스트에서는 src/assets에 저장한 이미지를 가져오는 방법에 대해 살펴보자.

 

assets 이미지 가져오기

 

정적 로딩

assets 아래의 이미지를 정적으로 가져오려면 그냥 js를 참조하듯이 경로를 작성해주면 된다.

<img src="@/assets/images/001.png">

또는 파일을 import 해서 사용하는 방법도 제시한다.

import staticImg from '@/assets/images/123.png'

<img :src="staticImg">

 

 

개별 파일 동적 로딩

반면에 동적으로 로딩하기 위해서는 좀 복잡한 절차를 거쳐야 한다. 기존의 Vue 2.x는 WebPack을 사용해서 require 함수를 이용해서 로딩했었는데 Vue 3.x에서는 Vite로 변경되면서 URL 객체를 사용하는 방식으로 변경되었다.

https://ko.vitejs.dev/guide/assets.html#new-url-url-import-meta-url

Vite

new URL(url)
new URL(url, base)

URL에 대상 파일의 위치를 적어주면 되고 base는 import.meta의 url을 사용해주면 끝이다.

 

const getImageUrl = () => {
    // 전체 글자수 맞추기 003
    const id = route.query.id.padStart(3, '0');
    // 동적 경로로 assets를 로딩할 경우 @를 사용하면 안된다.
    return new URL(`/src/assets/images/${id}.png`, import.meta.url);
};

<img :src="getImageUrl(route.query.id)">

절대 경로를 작성하면서 주의할 점은 변수(@)를 사용하면 안되고 /src를 사용해야 한다. 

 

 

내가 뭘 잘못했나? ㅜㅜ

그런데 이상하게 vite 공식 문서대로 처리했을 때는 폴더의 모든 image들을 로딩하는 기 현상이 일어났다.

원인은 지금도 모르겠지만.. 모든 이미지를 다 로딩함.

다행히 vue 3에서는 URL을 리턴하는 방법 외에 경로를 반환하는 방법도 지원한다.

const getImageUrl = () => {
    const id = route.query.id.padStart(3, '0');
    //return new URL(`/src/assets/images/${id}.png`, import.meta.url);
    return `/src/assets/images/${id}.png`;
};

 

폴더의 모든 리소스 로딩

 

만약 폴더 전체의 리소스를 로딩하는 경우라면 import.meta.glob를 사용할 수 있다.

https://ko.vitejs.dev/guide/features.html#glob-import

Vite

 

const modules = import.meta.glob("@/assets/images/*.png", { eager: true })
const images = [];
for (const img in modules) {
    images.push(modules[img].default)
}

<img :src="images[2]">