[Vuejs]-Where to put your image when using require to resolve image path [Vue]

by

1👍

✅

Path are relative to the file where you write your require.

So lets says the your script is in ./src/components/myComp.vue your file would be lookup in ./src/static/picture.jpg

The purpose of transformToRequire is not to manage asset location although it might issue error if path is not set properly. transformToRequire is only a syntactic sugar from src="..." to src="require(...)" and let webpack do the rest.

There is also an alternative if you don’t want to border where your file is, especially when your are moving file around.

In webpack you set an alias for some path typically:

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }   
  },

So that you can use:

<b-img :src="require(@/static/picture.jpg)" />
👤mathk

1👍

Based on the structure you gave, you would have a static folder in src where you put your images.

But do note that require is relative to the currently file.

👤Slava Knyazev

Leave a comment