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?

Internuncial

Do you really have to use require() inside of image tag src attribute? Doesn't it look weird? – Fala

Yes, or you can split your <img tag into its own stateless component if you wish. – Internuncial

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.

Internuncial