webpack изисква относително изображение

Имам два файла:

  • ./img/mypic.png
  • ./js/help/targets/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 и webpack дава на изображението този път /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 config-hint на какво да базира своите пътища:

Използвайте:

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

Да кажа на webpack да не е относителен.

person Henrik    schedule 23.07.2015
comment
Наздраве. Благодаря - person denvaar; 24.09.2016