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

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

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

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

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

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

изображение(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"

Как мне потребовать изображение в мопсе?


webpack pug-loader webpack-html-loader
person Jackie    schedule 05.01.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В итоге это сработало для меня (хотя и не совсем то, что я хотел)...

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

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

Конечно, мне не нравится обертывать требование, когда я должен иметь возможность подключиться к загрузчику HTML, но я не могу заставить его работать.

person Jackie    schedule 05.01.2017
comment
привет, Джеки, я столкнулся с той же проблемой, чтобы заставить изображение работать в моем шаблоне мопса, у меня такая же конфигурация веб-пакета, и я пытаюсь потребовать png с помощью require, он не работает и говорит, что требование не определено.. может быть, я пропал что-нибудь, не могли бы вы помочь в этом, как вы это исправили? - person SED; 18.10.2017
comment
Похоже, вы не включаете типы узлов... Я бы попробовал добавить их в ваш package.json... ``` @types/core-js: ^0.9.43, @types/jasmine: ^2.6. 0, @types/jquery: ^3.2.12, @types/узел: ^8.0.30, ``` - person Jackie; 19.10.2017

arrow_upward
0
arrow_downward

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

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

person Rafael    schedule 08.05.2017