[Vuejs]-How to load dynamic image from assets folder in NuxtJS

by

0👍

To load dynamic images in the asset folder you can use require to tell webpack which image to load like so. In your template you can do:

<img :src="require(`../assets/img/${folderType}/bg1.png`)" />

Note: assuming folderType is defined in your script section

You can extract the require statement into a computed property(would make your template cleaner). So like so:

export default {
  // ...
 data() {
  return {
   folderType: 'folderTypeGoesHere'
}
},
  computed: {
    imagePath () {
      return require(`../assets/img/${this.folderType}/bg1.png`) // the module request
    }
  }
}

Then in your template just use:

<img :src="imagePath" />

For your second problem, you could resolve to not using the tilde ~ alias and just use a relative path as I did in the image path example above.

Leave a comment