Webpack выводит неверный путь для изображений

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

мой компонент реакции выглядит следующим образом:

'use strict';

var React = require('react');
var newsFeedIcon = require('../../img/news-feed-icon.png');

//create story component
module.exports = React.createClass({
  render: function () {
    return (
        <div className="col_12 footer-right mobile-foot">
        <img src={newsFeedIcon} />
        <p><a href="/about">About Us</a> | <a href="/contact">Contact Us</a> | <a href="/faq">FAQ</a> | <a href="/media">Media</a> | <a href="#">Privacy Statement</a> | <a href="#">Terms of Service</a></p>
      </div>
      );
  }
})

Ответы

Ответ 1

Вы можете попробовать установить параметр имени для файлового загрузчика, а также output.publicPath.

 output: {
     path: 'build/',
     file: 'bundle.js',
     publicPath: '/assets'
}

...

{ 
     test: /\.(png|jpg)$/, 
     loader: 'file-loader?name=/img/[name].[ext]' 
}

Тогда разрешенный URL-адрес в вашем запросе будет:

/assets/img/news-feed-icon.png