[Vuejs]-Concatenate multiple vue-loader require in a computed property to define a srcset attribute Vue.js (Nuxt)

by

0👍

I finally found that my problem was elsewhere, a part that isn’t showed in the question to simplify the comprehension but I discovered you can’t require with string variable in the beginning of the path. I was calling like this:

${require(`${this.imagePath}${this.name}-${this.sizes[i][0]}.webp`)}

but it seems require can’t resolve the path like this. Adding the path fixed the problem:

${require(`~/assets/img/${this.name}-${this.sizes[i][0]}.webp`)}
// @/assets also works but as it is deprecated in the Nuxt docs I replaced the pointer with "~" everywhere.

And watch out if you forget to write the complete path (like missing the /img/ part) because require will try to get all files in the assets and will output an error for every assets like fonts files or any other that doesn’t fit for vue-loader aka webpack loader (I think so).

Leave a comment