Kann keine Bilder laden mit webpack dev server middleware

Also ich habe in den letzten 24 Stunden und Optimiere meinen code und versucht, diese zu arbeiten und durchforstete SO und Google, aber kein Glück - vielleicht kann jemand helfen!

Reagieren meine app läuft auf Express, aber mit webpack-dev-server-middleware. Wenn ich laden Sie die Seite, die Bilder sind wieder leer, wie wenn Sie nicht existieren. Ich bekomme keine Fehlermeldungen in meiner console (z.B. keine 404-Fehler), aber das image-element ist nur zeigen, das alt text und nicht die Darstellung der tatsächlichen png oder svg, die es sein sollte.

Übrigens es ist nicht nur die reagieren, die Komponenten sind nicht die render-Bilder - ich habe versucht, das hartcodieren eine image-Datei in mein index.html Datei als ein test, und dieser ergab das gleiche Ergebnis.

Hier ist mein code:

server.js (gekürzt um auszuschließen, Datenbank-setup und zusätzliche express-Routen)

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const path = require('path');
const mongoose = require('mongoose');
const config = require('./webpack.dev.config');

//SERVER SETUP

const app = express();
const router = express.Router();

var publicPath = path.resolve(__dirname, 'public');

compiler=webpack(config);

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: {colors: true}
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log
}));

//Routes

//...additional routes

app.get('*', function(req, res){
    res.sendFile(path.resolve(publicPath, 'index.html'));
})

app.use(express.static(publicPath));

app.listen(3000, function(){
    console.log('Server running on port 3000');
});

webpack.dev.config.js

var webpack = require('webpack');
var path = require('path');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var buildPath = path.resolve(__dirname, 'public', 'build');
var mainPath = path.resolve(__dirname, 'app', 'main.js');

var config = {

    devtool: 'eval-source-map',
    devServer: {
      historyApiFallback: true
    },
    entry: [

        'webpack/hot/dev-server',
        'webpack-hot-middleware/client',
        'whatwg-fetch',
        //Our application
        mainPath
    ],
    output: {
        path: '/',
        publicPath: 'http://localhost:3000/build/',
        assetsPublicPath: 'http://localhost:3000/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: 'babel',
                exclude: nodeModulesPath
            },
            {
                test: /\.css$/,
                loader: 'style!css?modules!postcss'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader'
            }
        ]
    },
    postcss: [
        require('autoprefixer'),
        require('precss')
    ],
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    target: 'web'
};

module.exports = config;

Hier ist ein Beispiel, Reagieren Komponente, sollte auf ein Bild zugreifen:

import React, {Component, PropTypes} from 'react';
import TopMenu from "./TopMenu";
import styles from '../cssPartials/TopBar.css';

const logo = './images/svg/xenonLogo.svg';

const TopBar = () => {

    return (
        <div className={styles.topBar}>
            <div className={styles.logoHolder}>
                <img src={logo} alt="Xenon Logo" />
            </div>
            <TopMenu />
        </div>
    )

}

export default TopBar

- Und dies ist die Datei-Struktur für die app:

root
  |-app
     |-admin
        |-components //React components
     |-users
        |-components //React components
  |-data //contains database and redux files
  |-node_modules
  |-public //This is the public folder specified in server.js and webpack.dev.config.js
     |-images
        |-svg //contains the svg files
     |-index.html
     |-bundle.js
  |-.babelrc //babel config file
  |-nodemon.json //nodemon config file
  |-package.json
  |-server.js
  |-webpack.dev.config.js

Ich denke, das ist alles, aber lassen Sie mich wissen, wenn es mehr code erforderlich. Vielen Dank an alle!