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

У меня есть следующие конфигурации для моего мопс файлов ...Как мне требуется изображение в Мопс с помощью Webpack

{ 
    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>";"): [email protected]:97"

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

источник

2017-01-05 Jackie

Это закончилось тем, что работал для меня (хотя на самом деле не то, что я хотел) ...

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

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

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

источник

2017-01-05 04:04:25 Jackie

привет, Джеки, я столкнулся с той же проблемой, чтобы получить изображение в шаблоне мопса, у меня такая же конфигурация веб-пакета и попробуйте потребовать png с помощью require, он не работает и говорит, что требование не определено. возможно, я пропустил что-то, что вы могли бы помочь в этом, как вы это исправили? – Edrees

Похоже, вы не включая типы узлов ... Я хотел бы попробовать добавить их к своему package.json ... '' ' «@ типов/ядро-JS»:«^ 0.9.43 ", " @ types/jasmine ":"^2.6.0 ", " @ types/jquery ":"^3.2.12 ", " @ types/node ":"^8.0.30 ", ' ' ' – Jackie

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

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

источник

2017-05-08 18:45:48 Rafael

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

ответ

Смежные вопросы