How to load dynamic image from assets folder in NuxtJS

Question

I have 2 problems:

If I use the variable in src:

I will get this link in the web and not exactly:

http://localhost:3000/~/assets/product/image/bg.png

Similar to the first problem. I want to use dynamic css file in head() method:

export default { head () { const style = this.$cookie.get('app_style') return { link: [ { rel: 'stylesheet', href: ~/assets/${style}.css } ] } } }

Could you please share a snippet of how you are adding the image? — Kelvin Omereshone
Sorry, I have added in the post but it is not displayed. My example to display image: <img src="~/assets/${folderType}/bg1.png" /> — Alber Z
I added an answer utilizing the code snippet you gave. I hope that helps. — Kelvin Omereshone

Kelvin Omereshone Kelvin Omereshone · Accepted Answer · 2020-06-18T10:30:46

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.

How to load dynamic image from assets folder in NuxtJS

1 Answers