Как передать в функцию require() переменную?

Question

[Anton8989]

Доброго дня)) У меня есть путь к картинке @/assets/file/1.jpg, чтобы вывести картинку использую цикл которой перебирает такой массив items: [{src: require('@/assets/file/1.jpg')} и в template таким образом выводит картинку v-carousel-item(v-for='item in items' :src = "item.src") И вопрос такой, как можно в фуекцию require() передавать не конкретный путь, а переменную скажем test, которая в себе содержит путь '@/assets/file/1.jpg'
Все попытки сделать что-то типо этого [{src: require(test)} не увенчались успехом(((( Если кто знает буду очень благодарен)))

Answer 1

[Anton8989]

В общем решил проблему таким образом, может кому поможет))
require(`@/assets/${item.src.slice(9)}`)

Comments

[Aetae]

Прочитай мой ответ.
У тебя в бандле теперь лежит всё содержимое папки @/assets/ пропущенное через require.

[Александр]

Согласен (нравиться)
Или используй static (без require), он хотя бы не раздует проект до бешеных размеров.

Answer 2

[Aetae]

Ты же понимаешь, что вот это вот {src: require('@/assets/file/1.jpg')} происходит на этапе сборки и в код попадает уже что-то типа:{src: '/img/1.fd5gdf.jpg'} или там {src: 'data:image/jpeg;base64,...'}
(точнее в что-то типа, {src: a("18c2")}, которое возвращает уже соответственно '/img/1.fd5gdf.jpg' или 'data:image/jpeg;base64,...', т.е. результат обработки require('@/assets/file/1.jpg'))
Переменная testже становится действительна только во время исполнения.

Можно использовать частичные пути вида {src: require(`@/assets/file/${test}.jpg`)}, но никакой магии тут всё равно нет: в таких случаях webpack просто обрабатывает require для всех файлов по маске @/assets/file/*.jpg(что может сильно раздуть размер бандла если в папке много лишнего мусора) и заменяет require(`@/assets/file/${test}.jpg`) на соответствующую условную конструкцию с применением переменной test.

Делая же так: {src: require(test)} ты не даёшь webpack'у даже намёка, на то что бы там следовало грузить и откуда.

Answer 3

[Alex]

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