0

我正在尝试使用 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'

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

4

1 回答 1

0

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

有 2 种要求。

第一种是静态需求。

img(src=require('images/1.png'))效果很好，因为资产的路径（1.png）永远不会改变，并且无需执行或编译代码就可以知道文件路径。

第二种是动态需求。

require()当 a包含表达式而不是字符串文字时，它是动态的，因此在编译时不知道确切的模块。这就是你写作时的目标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/.*'

于 2019-07-31T10:21:03.880 回答