26

I'm building a site with react and webpack. When I build the app with webpack and try to include images, the images are written to the build folder along with the other assets, but the link to the image that webpack outputs is incorrect. I can go in the build folder and view the image, so it is being copied correctly it is the link that is wrong.

my react component looks like this: 

'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>
      );
  }
})

My Webpack configuration looks like this: 

    webpack: {
      client: {
        entry: __dirname + '/app/js/client.jsx',
        output: {
          path: 'build/',
          file: 'bundle.js'
        },
        module: {
          loaders: [
          {
            test: /\.jsx$/,
            loader:'jsx-loader'
          },
          {
            test: /\.css$/,
            loader: "style-loader!css-loader"
          },
          {
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
          },         
          { 
            test: /\.jpe?g$|\.gif$|\.png$/i, 
            loader: 'file-loader' 
          },
          {
            test: /\.jpg/,
            loader: 'file'
          }]
        }
      },
      test: {
        entry: __dirname + '/test/client/test.js',
        output: {
          path: 'test/client/',
          file: 'bundle.js'
        },
        module: {
          loaders: [
          {
            test: /\.jsx$/,
            loader:'jsx-loader'
          }] 
        }
      },
      karma_test: {
        entry: __dirname + '/test/karma_tests/test_entry.js',
        output: {
          path: 'test/karma_tests/',
          file: 'bundle.js'
        },
        module: {
          loaders: [
          {
            test: /\.jsx$/,
            loader:'jsx-loader'
          }]
        },
        background: true
      }
    },

I've been banging my head against the wall on this since yesterday, so any help would be appreciated. Let me know you need more info.

Thanks!

CascadiaJS
  • 2,320
  • 2
  • 26
  • 46

1 Answers1

56

You could try setting the name option for file-loader, as well as output.publicPath.

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

...

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

Then the resolved url in your require will be:

/assets/img/news-feed-icon.png
hampusohlsson
  • 10,109
  • 5
  • 33
  • 50
  • 4
    Adding a vote here because the suggested solution actually resolved my issue - haven't checked this against the actual question - that is the OPs responsibility. – arcseldon Dec 17 '15 at 15:42
  • thanks it works. Tip for people like me using django backend, publicPath needs to be `/static/bundles/` – Vaibhav Vishal Oct 20 '18 at 06:11
  • how did this even work? When I tried putting path: "dist/" webpack a complained that it's not an absolute path – PositiveGuy Jul 26 '20 at 04:24
  • @PositiveGuy well, `dist/` is not an absolute path. Absolute paths always starts with a `/` – hampusohlsson Aug 10 '20 at 13:25