webpack require relative image

Question

I have two files:

• ./img/mypic.png
• ./js/help/targets/target.js

In target.js:

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

With 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' },

Which compiles the image into ./[hash].png.

Now, I use react-router, so I'm at /help/targets/target and webpack is giving the image this path /help/targets/[hash].png where hash is a sha1 sum. I would prefer if it gave it the path /[hash].png. Just

How do I make webpack understand that for this js file, the file path to the image is relative in the same way as in the browser?

Answer 1

The trick is to give webpack a config-hint on what to base its paths on:

Use:

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

To tell webpack not to be relative.