SCSS Webpage URL URL broken into nested routes

Question

Here is my directory structure:

- public - src - app.js - assets - images - logo-b-green.png - stylesheets - nav.scss 

and

 // webpack.config.js module.exports = { entry: './src/app.js', output: { path: './public', filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=fonts/[name].[ext]' }, { test: /\.(png|jpg|gif)$/, loader: "file-loader?name=images/img-[hash:6].[ext]" } ] }, resolve: { extensions: ['', '.js', '.json'] } }; 

and

 /* nav.scss */ #nav-logo { height: 26px; width: 26px; background-size: 100%; background-image: url('../images/logo-b-green.png'); float: left; margin: 16px 0 0 23px; } 

When loading routes of the same level, my image links work correctly.

For example, in /search image link is displayed as url(images/img-75fa3d.png) and works.

However, if I go to the nested route (via the React Router), for example, /properties/1 link to the image is the same and cannot find the correct location of the image, since this is a relative link: url(images/img-75fa3d.png) .

Image from this example logo-b-green.png .

EDIT:

I added the publicPath section to the output section, and it worked, now the URLs go to the root. Can someone confirm that this is the right way to handle this?

 output: { path: './public', filename: 'bundle.js', publicPath: '/' }, ... 

Answer 1

I added the publicPath section to the output section and it worked, now the urls are coming from the root.

 output: { path: './public', filename: 'bundle.js', publicPath: '/' }, ...