Question

我的pug文件有以下配置...

{
    test: /\.pug$/,
    loaders: ["pug-html"]
}

现在这很好用我想添加一个用url-loader加载的图像。我的结构是这样的

src
  ...
    thing
      thing.template.pug
      thing.png

我想把png包含在我添加的pug文件中......

IMG（SRC =＆＃34; thing.png＆＃34）

这并没有解决，所以我尝试了img(src=require("thing.png"))之类的东西。这些都不起作用。我试着像这样添加html-loader ......

 {
      test: /\.pug$/,
      loaders: ["html?interpolate=require&-minimize", "pug-html"]
 },

然后我得到......

Module not found: Error: Cannot resolve directory './\"thing.png\"' in .../src/.../thing
 @ ./src/.../thing/thing.template.pug 1:128-164

这一切在我的手写笔中都很好用......

    {
      test: /.*[^\.global]\.styl$/,
      loaders: ["to-string", "css", "stylus"]
    },

我也试过......

img(src=statesmall.png)

并获取Cannot read property 'png' of undefined

此外，如果我在那里用html评论该行，我看到......

"Template parse errors:
Unexpected closing tag "div" ("module.exports = "<div><h1>Hey</h1><div class=\"terminal-output\">this thing</div>[ERROR ->]</div>";"): TerminalComponent@0:97"

我如何需要哈巴狗的图像？

Answer 1

这最终为我工作（虽然不是我想要的）......

{
  test: /\.pug$/,
  loaders: ["apply", "pug"]
},

img(src=require("./thing.png"))

当然，当我应该能够管道加载到HTML加载器时，我不喜欢包装在require中，但我无法让它工作。

Answer 2

我知道这已经晚了几个月了，但是当我刚才遇到同样的问题时，我在html-loader documentation找到了答案。

基本上，每次加载程序找到img标记时，它都会尝试默认解析，但您可以将attrs查询参数设置为false以停止此行为。当然，您现在必须注意img路径相对于您呈现的HTML所在的构建文件夹而且它将不再依赖于url-loader。

如何使用Webpack在Pug中需要图像

2 个答案: