webpack требует относительного изображения

У меня есть два файла:

  • ./img/mypic.png
  • ./js/help/цели/target.js

В target.js:

<img src={require("../../../img/target.png")} />

С помощью webpack.config.js:

 14   module: {
 15     loaders: [
 16       { test: /\.js$/, loader: 'jsx-loader?harmony' },
 17       { test: /\.css$/, loader: 'style-loader!css-loader' },
 18       { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },

Который компилирует изображение в ./[hash].png.

Теперь я использую react-router, поэтому я нахожусь в /help/targets/target, и веб-пакет дает изображению этот путь /help/targets/[hash].png, где хэш - это сумма sha1. Я бы предпочел, чтобы он дал ему путь /[hash].png. Просто

Как сделать так, чтобы webpack понимал, что для этого js файла путь к файлу изображения относителен так же, как и в браузере?


webpack javascript image-loading urlloader
person Henrik    schedule 27.05.2015    source источник
comment
Вам действительно нужно использовать require() внутри атрибута src тега изображения? Разве это не выглядит странно?   -  person Green    schedule 12.03.2016
comment
Да, или вы можете разделить свой тег <img на отдельный компонент без сохранения состояния, если хотите.   -  person Henrik    schedule 15.03.2016

Ответы (1)


arrow_upward
20
arrow_downward

Хитрость заключается в том, чтобы дать webpack конфигурационную подсказку о том, на чем основывать свои пути:

Использовать:

"output": { "publicPath": "/" }

Чтобы указать webpack, чтобы он не был относительным.

person Henrik    schedule 23.07.2015
comment
Будьте здоровы. Спасибо - person denvaar; 24.09.2016