[Vuejs]-How to set image src with alias in Vue3 + Vite

This can be done with tsconfig.json or jsconfig.json. Create tsconfig.json or jsconfig.json file in your project’s root directory and add following fields

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@img": ["src/shared/assets/img"]
    },
    ...
   }
   ...
}

You can resolve all of your needed images as URLs (remember they all will be included in the build). Then use a computed to dynamically find a compiled URL for an image:

const imageUrls = import.meta.glob('@img/map_icons/*_icon.png', { as: 'url', eager: true });

const imageUrl = computed(() => {
    for(const path of imageUrl){
        if(path.includes(`/${ currentMap.title }_`)){
            return imageUrl[path];
        }
    }
    return '';
});

<img :src="imageUrl">