78

I'm using Vue 3 with Vite. And I have a problem with dynamic img src after Vite build for production. For static img src there's no problem.

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>

It works well in both cases: when running in dev mode and after vite build as well. But I have some image names stored in database loaded dynamically (Menu icons). In that case I have to compose the path like this:

<img :src="'/src/assets/images/' + menuItem.iconSource" />

(menuItem.iconSource contains the name of the image like "my-image.png"). In this case it works when running the app in development mode, but not after production build. When Vite builds the app for the production the paths are changed (all assests are put into _assets folder). Static image sources are processed by Vite build and the paths are changed accordingly but it's not the case for the composed image sources. It simply takes /src/assets/images/ as a constant and doesn't change it (I can see it in network monitor when app throws 404 not found for image /src/assets/images/my-image.png). I tried to find the solution, someone suggests using require() but I'm not sure vite can make use of it.

Improve this question

18 Answers 18

Reset to default
126

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

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

How can I use it with path like @/assets/some_image.jpg?
"However, the URL string must be static [...]" - which means it will not work for this question, which is explicitly about dynamic urls.
This is more difficult than it should be.
@Roland "Dynamic URL" in this case means a variable used in a string literal, not a string constructed at runtime. The Vite docs states that the URL string must be static: vitejs.dev/guide/assets.html#new-url-url-import-meta-url "However, the URL string must be static so it can be analyzed, otherwise the code will be left as is..." So your proposed solution for dynamic URLs doesn't work.
@Roland Should definitely add the glob option for absolute paths. vitejs.dev/guide/features.html#glob-import
|
22

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.

Improve this answer

Comments

19

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.

Improve this answer

2 Comments

it works perfectly on production :) Tks!
this works well until you have to configure base path for different environment :(
11

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.

Improve this answer

1 Comment

This worked for me until I worked on a monolithic full stack app (Vue 3 + Spring Boot), then I had to use this other way: stackoverflow.com/a/78577659/7894940.
6

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="...">
Improve this answer

Comments

5

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')" />
Improve this answer

1 Comment

This is the best answer in this thread because it actually emits the files and they don't need to be in the public folder. Though you could use modules[`/src/assets/images/${fileName}`] instead of the find lookup
3

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>
Improve this answer

Comments

1

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;
  };
Improve this answer

3 Comments

Code-only answers are not particularly helpful. Please add some descriptions of how this code solves the problem.
Hi. Well, this works. But how does it work? Can you explain? The code loading all icons runs each time an icon is requested, or not? It would be very inefficient, wouldn't it?
This is not a very good method, and there is indeed a problem of introducing too much useless content, but I tried to use a variable to define the image path to import.meta.globEager, this method will report an error, it can only receive a string type. If there is a better solution that can be provided to me, thank you very much!
1

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'
    }
  })
Improve this answer

Comments

1

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:

enter image description here

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.
Improve this answer

Comments

1

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

Improve this answer

Comments

1

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)

Improve this answer

Comments

1 
<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>
Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
1

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>
Improve this answer

Comments

0

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 })
      }
    }
  }
})
  1. 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>
Improve this answer

Comments

0

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;

},

Improve this answer

Comments

0

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

Improve this answer

Comments

-3

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. enter image description here

Importing images

Improve this answer

3 Comments

the //eslint-disable is a problem where imports cannot be resolved so do add that if you run into that issue
Hi, code snippets as images are not allowed. Please use actual text.
This doesn’t sit well with me. But for the benefit of doubt I’m glad you mentioned if the images were limited.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.