如何从数组（Webpack）的每个循环中要求pug内的图像

Question

我正在尝试使用pug循环迭代数组。我使用的是webpack，但在获取图片时遇到了一些问题。

如果我需要字符串（不是变量）中的图片。

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

它工作正常，但是当我从数组中调用它

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

我从webpack收到此错误。

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

我不知道需求发生了什么。有任何想法吗？谢谢！

Answer 1

此问题与webpack有关，与pug-loader不相关。

有两种类型的需求。

第一种类型是静态需求。

img(src=require('images/1.png'))之所以运作良好，是因为资产（ 1.png ）的路径永远不会改变，并且无需执行或编译任何代码即可知道文件路径。

第二种类型是dynamic require。

当require()包含表达式而不是字符串文字时，它是动态的，因此在编译时不知道确切的模块。这就是编写img(src=require(image.thumb))时的目标。

不幸的是， webpack设计不支持将变量作为参数，它必须是字符串或字符串串联。在这种情况下，webpack将使用Critical dependency: the request of a dependency is an expression向用户发出警告。 here对此进行了进一步说明。

解决方案

这个想法是用我们的变量创建一个表达式。
我们可以写：

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

但是请注意捆绑包的输出，因为前两个将需要projet的每个文件，因为webpack会需要每个与.*匹配的文件。而最后一个仅匹配“ images /.*”