2

我的哈巴狗文件有以下配置...

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

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

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

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

img(src="thing.png")

这没有解决，所以我尝试了类似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"

我如何在哈巴狗中需要图像？

4

2 回答 2

2

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

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

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

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

于 2017-01-05T04:04:25.663 回答
0

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

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

于 2017-05-08T18:45:48.807 回答