Update 2022: Vite 3.0.9 + Vue 3.2.38

Solutions for dynamic src binding:

1. With static URL

<script setup>
import imageUrl from '@/assets/images/logo.svg' // => or relative path
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

2. With dynamic URL & relative path

<script setup>
const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

3. With dynamic URL & absolute path, computed

<script setup>
import { computed } from 'vue'

const props = defineProps({
    name: String,
})

const imageUrl = computed(
    () => new URL(`@/assets/images/${props.name}.png`, import.meta.url).href
);
</script>

<template>
  <img :src="imageUrl" />
</template>

4. With dynamic URL & absolute path

Due to Rollup Limitations, all imports must start relative to the importing file and should not start with a variable.

You have to replace the alias @/ with /src

<script setup>
const imageUrl = new URL('/src/assets/images/logo.svg', import.meta.url)
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

2022 answer: Vite 2.8.6 + Vue 3.2.31

Here is what worked for me for local and production build:

<script setup>
const imageUrl = new URL('./logo.png', import.meta.url).href
</script>

<template>
<img :src="imageUrl" />
</template>

Note that it doesn’t work with SSR

Vite docs: new URL

Following the Vite documentation you can use the solution mentioned and explained here:

vite documentation

const imgUrl = new URL('./img.png', import.meta.url)

document.getElementById('hero-img').src = imgUrl

I’m using it in a computed property setting the paths dynamically like:

    var imagePath = computed(() => {
      switch (condition.value) {
        case 1:
          const imgUrl = new URL('../assets/1.jpg',
            import.meta.url)
          return imgUrl
          break;
        case 2:
          const imgUrl2 = new URL('../assets/2.jpg',
            import.meta.url)
          return imgUrl2
          break;
        case 3:
          const imgUrl3 = new URL('../assets/3.jpg',
            import.meta.url)
          return imgUrl3
          break;
      }
    });

Works perfectly for me.

The simplest solution I’ve found for this is to put your images in the public folder located in your directory’s root.

You can, for example, create an images folder inside the public folder, and then bind your images dynamically like this:

<template>
  <img src:="`/images/${ dynamicImageName }.jpeg`"/>
</template>

Now your images should load correctly in both development and production.

According to the docs here. For dynamic images, it’s best to do something like this…

/* create a util function or method or computed property
   also assuming your static images are in assets folder
*/
const getImageUrl = (path: string) => {
 return new URL(`../assets/${path}`, import.meta.url).href;
};

// and use in code like this assuming products is a list
<ul>
  <li v-for="product in products" :key="product.id">
   <img alt="nice image" :src="getImageUrl(product.img)" />
  </li>
</ul>

This works for me perfectly and I hope it helps someone.

All you need is to just create a function which allows you to generate a url.

from vite documentation static asset handling

const getImgUrl = (imageNameWithExtension)=> new URL(`./assets/${imageNameWithExtension}`, import.meta.url).href;

//use

<img :src="getImgUrl(image)" alt="...">

Use import.meta.glob for absolute paths with variables

For absolute paths, there is a way to load images dynamically. It even supports the @ alias.

Try import.meta.glob

Heres a little convenience method for getting a file.

function getImage(fileName) {
  try {
    const modules = import.meta.glob('@/assets/images/**/*.{png,svg}', { eager: true, import: 'default' })
    const moduleKeys = Object.keys(modules)
    const fileSrc = moduleKeys.find(key => key.endsWith(fileName))

    return fileSrc ? modules[fileSrc] : ''
  } catch (err) {
    console.log(err)
  }
}

<img :src="getImage('whatever.png')" />

first, check the image directory src/assets/images/ then use import.meta.glob

<template>
  <div>
    <img :src="imageSrc" alt="Menu Icon" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const menuItem = ref({
  iconSource: 'my-image.png'
});

// Use import.meta.glob to load all images from the directory
const images = import.meta.glob('/src/assets/images/*', { eager: true });

const imageSrc = computed(() => {
  const imagePath = `/src/assets/images/${menuItem.value.iconSource}`;
  if (images[imagePath]) {
    return images[imagePath].default;
  } else {
    return '/src/assets/images/default.png';
  }
});
</script>

Please try the following methods

const getSrc = (name) => {
    const path = `/static/icon/${name}.svg`;
    const modules = import.meta.globEager("/static/icon/*.svg");
    return modules[path].default;
  };

In the context of [email protected], you can use new URL(url, import.meta.url) to construct dynamic paths. This pattern also supports dynamic URLs via template literals.
For example:

<img :src="`/src/assets/images/${menuItem.iconSource}`" />

However you need to make sure your build.target support import.meta.url. According to Vite documentation, import.meta is a es2020 feature but [email protected] use es2019 as default target. You need to set esbuild target in your vite.config.js:

  // vite.config.js
  export default defineConfig({
    // ...other configs

    optimizeDeps: {
      esbuildOptions: {
        target: 'es2020'
      }
    },

    build: {
      target: 'es2020'
    }
  })

My enviroment:

• vite v2.9.13
• vue3 v3.2.37

In vite.config.js, assign @assets to src/assets

'@assets': resolve(__dirname, 'src/assets')

Example codes:

<template>
    <div class="hstack gap-3 mx-auto">
        <div class="form-check border" v-for="p in options" :key="p">
            <div class="vstack gap-1">
                <input class="form-check-input" type="radio" name="example" v-model="selected">
                <img :src="imgUrl(p)" width="53" height="53" alt="">
            </div>
        </div>
    </div>
</template>

<script>

import s1_0 from "@assets/pic1_sel.png";
import s1_1 from "@assets/pic1_normal.png";

import s2_0 from "@assets/pic2_sel.png";
import s2_1 from "@assets/pic2_normal.png";

import s3_0 from "@assets/pic3_sel.png";
import s3_1 from "@assets/pic3_normal.png";

export default {
    props: {
        'options': {
            type: Object,
            default: [1, 2, 3, 4]
        }
    },
    data() {
        return {
            selected: null
        }
    },
    methods: {
        isSelected(val) {
            return val === this.selected;
        },
        imgUrl(val) {
            let isSel = this.isSelected(val);
            switch(val) {
                case 1:
                case 2:
                    return (isSel ? s1_0 : s1_1);

                case 3:    
                case 4:
                    return (isSel ? s2_0 : s2_1);
                    
                default:
                    return (isSel ? s3_0 : s3_1);
            }
        }
    }
}
</script>

References:

• Static Asset Handling of Vue3

Memo:

About require solution.

• “Cannot find require variable” error from browser. So the answer with require not working for me.
• It seems nodejs >= 14 no longer has require by default. See this thread. I tried the method, but my Vue3 + vite give me errors.

In Nuxt3 I made a composable that is able to be called upon to import dynamic images across my app. I expect you can use this code within a Vue component and get the desired effect.

const pngFiles = import.meta.glob('~/assets/**/*.png', {
  //@ts-ignore
  eager: true,
  import: 'default',
})

export const usePNG = (path: string): string => {
  // @ts-expect-error: wrong type info
  return pngFiles['/assets/' + path + '.png']
}

sources

The other examples worked for me. An alternative however is to import it like this:

<script setup>
  ...other code

  onMounted(() => {
    getImageUrl()
  })

  const url = ref()
  const getImageUrl = async () => {       
    url.value = (await import(/* @vite-ignore */`../assets/images/${dynamicValue.value}.png`)).default
  }
</script>
<template>
  <img :src="url">
</template>

(vue3/vite4/node18)

<template>
  <img :src="getImageUrl(imageName)" alt="Avatar" class="size-10" />
</template>

<script setup>
import { ref } from "vue";

const imageName = ref('df0e160d30bdbf8e0706c92ebf148036.png');

function getImageUrl(name) {
  return new URL(`../../assets/${name}`, import.meta.url).href;
}
</script>

<style scoped>
.size-10 {
  width: 10rem;
  height: 10rem;
}
</style>

For any newcomers on google, here is the method I used by piecing other answers in this thread together. My use-case is that I wanted to be able to specify a condition to load an image on a component and if that condition wasn’t met, to use an alternate image. I tried to use :src and :alt separately, but when a 404 was eventually thrown, the code which was supposed to catch the error never did.

Give this a try if you want to load an image if an image is found, and a different image otherwise:

script:

getImage(mainImage, altImage) {
        try {
          const modules = import.meta.glob('@/assets/items/*.png', { eager: true, import: 'default' })
          const moduleKeys = Object.keys(modules)
          const mainImagePath= moduleKeys.find((key) => key.includes(mainImage))
          const altImagePath= moduleKeys.find((key) => key.includes(altImage))

          return mainImagePath? modules[mainImagePath] : modules[altImagePath]
        } catch (err) {
          console.error(err)
        }
      }

...
props: {
   mainImage: {
     type: String,
     default: ""
   },
   altImage: {
     type: String,
     default: ""
   }
}

and in the template (I am using Vuetify):

<v-card class="pa-2">
    <v-row>
      <v-col>
        <v-avatar color="white">
          <v-img
            :src="getImage(mainImage, altImage)"
          >
          </v-img>
        </v-avatar>
      </v-col>
        <v-btn size="x-small" icon>
          <v-icon>mdi-plus</v-icon>
        </v-btn>
      </v-col>
    </v-row>
  </v-card>

Use Vite’s API import.meta.glob works well, I refer to steps from docs of webpack-to-vite. It lists some conversion items and error repair methods. It can even convert an old project to a vite project with one click. It’s great, I recommend it!

1. create a Model to save the imported modules, use async methods to dynamically import the modules and update them to the Model

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
const assets = import.meta.glob('../assets/**')
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    assets: {}
  },
  mutations: {
    setAssets(state, data) {
      state.assets = Object.assign({}, state.assets, data)
    }
  },
  actions: {
    async getAssets({ commit }, url) {
      const getAsset = assets[url]
      if (!getAsset) {
        commit('setAssets', { [url]: ''})
      } else {
        const asset = await getAsset()
        commit('setAssets', { [url]: asset.default })
      }
    }
  }
})

2. use in .vue SFC

// img1.vue
<template>
  <img :src="$store.state.assets['../assets/images/' + options.src]" />
</template>
<script>
export default {
  name: "img1",
  props: {
    options: Object
  },
  watch: {
    'options.src': {
      handler (val) {
        this.$store.dispatch('getAssets', `../assets/images/${val}`)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

This worked for me

<img v-for="image in project.images" :key="image.index" :src="`${getImagePath(image.src)}`" :alt="image.alt" />
getImagePath(image) {
   const imgUrl = `/nestedPublicFolder/${image}.jpg`;
   return imgUrl;

},

If you want to support ‘@/’, you can use next function:

export const loadFile = (file: string) => {
  let path = file;
  let baseUrl = '';
  if (file.startsWith('@/')) {
    path = file.replace('@/', '');
  } 
  return new URL(`./${path}`, import.meta.url).href;
}

Working for me for "vite": "^5.2.13" in latest Vue CLI setup

Why: ‘@’ is not getting resolved in production build but ./ working fine

If you have a limited number of images to use, you could import all of them like this into your component. You could then switch them based on a prop to the component.