[Vite&Typescript] Dynamic Image src

Vite와 Typescript로 구현된 프로젝트에서 로컬(프로젝트 폴더 안)에 저장된 이미지들을 불러와야하는 케이스가 있다.

<img src="../assets/images/icon/{color}/{name}.svg" />

이런 구조로 구현했는데 실제로 빌드된 스크립트를 이용해 이미지를 불러오려고하면 콘솔에 404 에러가 나왔다.

처음에는 경로 문제라고 생각해서 alias를 이용해 경로를 설정해보기도 하고, (-> 적절한 해결방법 아님)

빌드 설정에 assets도 추가해보기도 했다. -> 하지만 이렇게되면 빌드 결과물이 script 파일과 assets 폴더로 output이 나와버려서 스크립트만 사용해야하는 환경에서 적절하지 않은 방법이었다.

import 문을 사용해서 이미지를 불러오는 경우도 있었지만, dynamic한 path인 경우에 적절하지 않았고 이미지 갯수도 많은 편이었고 앞으로 더 늘어날 가능성이 있어서 이 방법도 적절하지 않았다.

 

 

 

Vite 공식 문서를 뒤져보니 assets 가져오는 방식에 대해 설명이 나와있었다.

https://vitejs-kr.github.io/guide/assets.html

Vite

여러 방법들 중에서 동적인 경로의 이미지를 가져오는 new URL(url, import.meta.url)를 사용했다.

 

 

이 방법을 사용해서 바꿔주었더니 빌드 후 생성된 스크립트에서도 이미지가 정상적으로 노출되었다.

function createImageElement(color: string, name: string) {
	const imgUrl = new URL(`../assets/images/icon/{color}/{name}.svg`, import.meta.url).href
	return `<img src="${imgUrl}" />`
}