Webpack / React图像完整路径

Question

我想在公共路径中加载图片。我使用webpackDevMiddleware + express + react

我有webpack配置：

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;

此外，app.js入口点。

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'));

一些组件菜单：

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;

在我希望使用<img src="/public/img/***.***"> or <img src="/img/***.***">的所有组件中，但这不起作用。如果我使用import Logo from '../../../img/logo.svg'它是有效的。但我从服务器加载了很多图像，我需要路径为'/ public / img'或其他路径。

我的项目结构：

public
  bulid
  js
  img
  styl
  font
node_modules
webpack.config.js
app.js
****(other)***