Как мне требуется изображение в Pug с помощью Webpack

Question

У меня есть следующий конфиг для моих файлов мопса...

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

Это прекрасно работает, теперь я хочу добавить изображение, которое я загружаю с помощью url-загрузчика. Моя структура такая

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

И я хочу, чтобы включить PNG в файл мопса, который я добавляю...

IMG (SRC ="thing.png")

Это не решает, поэтому я попробовал такие вещи, как img(src=require("thing.png")), Ни одна из этих работ. Я попытался добавить html-загрузчик, как это...

 {
      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, но я не могу заставить его работать.

Answer 2

Я знаю, что это несколько месяцев спустя, но я нашел ответ в документации по html-загрузчику, когда у меня только что возникла та же проблема.

По сути, каждый раз, когда загрузчик находит img тег пытается разрешить по умолчанию, но вы можете установить attrs параметр запроса к false чтобы остановить это поведение. Конечно, теперь вы должны помнить, что пути img относительно папки сборки, в которой находится ваш отрендеренный HTML, больше не будут зависеть от url-загрузчика.