How to pass a variable to the require() function?

Question

Vue.js

Good afternoon)) I have a path to the image @/assets/file/1.jpg, to display the image I use a loop that iterates over such an array of items: [{src: require('@/assets/file/1.jpg')} and in the template thus displays a picture v-carousel-item(v-for='item in items' :src = "item.src") test which contains the path '@/assets/file/1.jpg
' )

Answer 1

In general, I solved the problem in this way, maybe it will help someone))
require(`@/assets/${item.src.slice(9)}`)

Answer 2

You understand that this is happening at the assembly stage and something like: or there already gets into the code (more precisely, into something like, which already returns, respectively , or , i.e. the result of processing ) The variable becomes valid only during execution . You can use partial paths of the form , but there is still no magic here: in such cases, webpack simply processes the require for all files by mask (which can greatly inflate the size of the bundle if there is a lot of unnecessary garbage in the folder) and replaces{src: require('@/assets/file/1.jpg')}{src: '/img/1.fd5gdf.jpg'}{src: 'data:image/jpeg;base64,...'}
By doing this, you don't give webpack even a hint of what should be loaded there and from where. {src: require(test)}

Answer 3

https://medium.com/front-end-weekly/webpack-and-dy...