Как требовать изображения внутри pug каждого цикла из массива (webpack)

Question

Я пытаюсь перебрать массив с помощью цикла pug. Я использую веб-пакет, и у меня есть некоторые проблемы, требующие изображений.

Если мне требуется изображение из строки (не переменной).

img(src=require('images/1.png'))

Работает нормально, но когда я вызываю его из массива

each image in featuredImages
   .random__item.random__item--active(class=image.size)
      img(src=require(image.thumb))

Я получаю эту ошибку из веб-пакета.

ERROR in Template execution failed: Error: Cannot find module 'images/1.png'

Я не знаю, что происходит с требованием. Есть идеи? Спасибо!!

Answer 1

Эта проблема связана с webpack, а не с pug-loader.

Существует 2 типа требований.

Первый тип - статический запрос.

img(src=require('images/1.png')) работает хорошо, потому что путь к ресурсу (1.png) никогда не изменится, и путь к файлу может быть известен без какого-либо выполнения или компиляции кода.

Второй тип - динамический запрос.

Это динамично, когда require() содержит выражение, а не строковый литерал, поэтому точный модуль не известен во время компиляции. Это то, что вы стремились при написании img(src=require(image.thumb)),

К сожалению, по замыслу webpack не поддерживает переменную в качестве аргумента, это должна быть строка или конкатенация строк. В этом случае webpack предупредит пользователя Critical dependency: the request of a dependency is an expression, Это дополнительно объясняется здесь.

Решение

Идея состоит в том, чтобы создать выражение с нашей переменной.
Мы можем написать:

• img(src=require(image.thumb +''))
• img(src=require(`{image.thumb}`))
• img(src=require('images/' + image.thumb))

Но имейте в виду вывод размера пакета, так как первые два потребуют все файлы вашего проекта, а webpack - все файлы, которые соответствуют .*, В то время как последний будет соответствовать только 'images/.*'