Webpack/React images full path - node.js

Question

i want to load images in public path. I use webpackDevMiddleware + express + react
i have webpack config:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');
const VENDOR_LIBS = [
'lodash',
'react',
'react-dom',
'react-router-dom',
'babel-polyfill'
];
const config = {
entry: {
app: './public/js/app.js',
vendor: VENDOR_LIBS,
},
devtool: 'eval-source-map',
output: {
path: path.resolve(__dirname, 'public/build'),
filename: '[name].[hash].js',
publicPath: '/'
},
stats: {
colors: true
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader',
use: [
'css-loader?minimize!',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [autoprefixer()]
},
sourceMap: 'inline'
}
},
'stylus-loader'
]
})
},
{
test: /\.(png|woff|woff2|otf|eot|ttf|svg|jpg|jpeg)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
}),
new ExtractTextPlugin("[name].[hash].min.css"),
new htmlWebpackPlugin({
template: 'index.html'
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})
/*new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})*/
]
}
module.exports = config;
Also, app.js entry point.
const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const router = express.Router();
const history = require('connect-history-api-fallback');
if(process.env.NODE_ENV != 'production'){
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig)
app.use(history());
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {colors: true}
}))
} else {
app.use("/", express.static(__dirname));
app.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname, 'public/build', 'index.html'));
});
}
app.listen(3030, () => console.log('listen 3030'));
And some component Menu:
import React from 'react'
import { Link } from 'react-router-dom'
import Logo from '../../../img/logo.svg'
class Menu extends React.Component {
constructor(){
super()
}
render(){
return (
<Link to="/">
<img src='public/img/logo.svg'/>
</Link>
)
}
}
export default Menu;
At all component i want to use <img src="/public/img/***.***"> or <img src="/img/***.***">, but this not work. If i use import Logo from '../../../img/logo.svg' it is work. But i have many images loading from server and i need path for examle '/public/img' or some else path.
My Project structure:
public
bulid
js
img
styl
font
node_modules
webpack.config.js
app.js
****(other)***