Webpack moves images regardless it component nested routes - image

Question

I am using components with <img src> inside routes.
import myImg from './img.png'
<img src={myImg}>
Webpacks build move all files to thedist` folder, including images from components.
The problem is it moves images to the root of dist e.g. dist/img.png.
But also webpack rewrite images paths in HTML with component routes e.g.
<img src="/path/img.png">.
It bring all images from nested routes to 404.
I need to force webpack move images accordingly its routes or write src path in HTML without routes.
How should I do that?
router
const router = (
<BrowserRouter>
<Route path='/'
component={App}/>
</BrowserRouter>
);
ReactDOM.render(
router,
document.getElementById('root')
);
webpack.config.js
module.exports = {
watch : true,
entry : {
app: [
'babel-polyfill',
path.resolve(__dirname, 'src/index.jsx')
]
},
resolve: {
extensions: ['.js', '.jsx']
},
output : {
filename: 'bundle-[hash].js',
path : path.resolve(__dirname, 'dist'),
},
plugins: [
new ExtractTextPlugin('[name]-[hash].css'),
],
module : {
rules: [
{
test : /\.jsx?$/,
exclude: /node_modules/,
use : 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.(less|css)$/,
use : ExtractTextPlugin.extract(
{
use: [
{loader: 'css-loader'},
{loader: 'resolve-url-loader'},
{loader: 'less-loader'},
]
}
),
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use : [
'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
],
},
]
}
}