Javascript 应用程序中未显示的图像

下午好

我正在使用React/Redux应用程序，正在加载到我的商店中的图像没有显示。My

galleryObject.js

包含关于我想显示的每个图像的信息，如下所示：

pastry1: {
    name: "Pastry!",
    image: "./client/images/cake1.jpg",
    desc: "Tasty Pastry"
  },
  pastry2: {
    name: "Pastry!",
    image: "./client/images/cake2.jpg",
    desc: "Tasty Pastry"
  } ... (all the way to pastry17)

让我困惑的是，绝对路径不会导致显示图像，状态被正确加载，因为我可以在React-dev工具中看到它。我甚至在网上添加了一个图片的超链接，它可以测试出来

我的文件结构是这样的：

// Project
  // client
    //images (where the actual pictures are stored)
    //data (where galleryObject.js resides)
    //main.js (where everything eventually becomes bundled

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.css$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    },
    // images
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: path.join(__dirname, 'client'),
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  }
};

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [

    './client/main'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.scss$/, 
      include: path.join(__dirname, 'client'),
      loaders: ["style", "css", "sass"]
    },
    // IMAGES
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: path.join(__dirname, 'client'),
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  }
};

根据我的经验，这通常是我的

devServer.js

如何访问项目中的静态文件的问题这里真正需要承认的是，我从Wes Bos的学习Redux教程中复制了这个

devServer.js

，它看起来是这样的：

devServer.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

import { createStore, compose } from "redux";
import { syncHistoryWithStore } from "react-router-redux";
import { browserHistory } from "react-router";


// all roots



// root reducer

import rootReducer from "./reducers/mainReducer";

// data Objects

import cakeGallery from './data/galleryObject'; // the object is passed into the default state


// default state object

const defaultState = {

  cakeGallery,
  open: false

};


const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

function cakeGallery(state={}, action){
  console.log("cake gallery reducer")
  console.log(state, action);
  return state;
}

export default cakeGallery; // this gets combined with another reducer 
// in project/client/reducers/mainReducer.js

// this file is basically creating a component that will
// "sprinkle on" props and dispatchers to our Main component

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../actions/userActions.js";

import StoreShell from "./StoreShell.js";

// cakeGallery is now known simply as images when referred to in components
function mapStateToProps(state){
  return {
    images: state.cakeGallery,
    open: state.open
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators, dispatch);
}




const App = connect(mapStateToProps, mapDispatchToProps)(StoreShell);
                                          // immediately call what component you want to connect to (Main)
export default App;

import Main from "./Main"

const StoreShell = React.createClass({
  render(){
    return(
        <div>
          <Main {...this.props} />
        </div>
      )
  }
})

export default StoreShell;

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

// SOLVED IT 
app.use(express.static(path.join(__dirname + "/client")));


app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

看到很多网页包的东西，我想这就是我出错的地方，所以我检查了tcoopman的I npm安装的模块和我的

webpack.config.dev/prod.js

两者看起来都与tcoopman的示例相同：

webpack.config.dev.js:

// Project
  // client
    //images (where the actual pictures are stored)
    //data (where galleryObject.js resides)
    //main.js (where everything eventually becomes bundled

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.css$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    },
    // images
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: path.join(__dirname, 'client'),
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  }
};

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [

    './client/main'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.scss$/, 
      include: path.join(__dirname, 'client'),
      loaders: ["style", "css", "sass"]
    },
    // IMAGES
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: path.join(__dirname, 'client'),
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  }
};

webpack.config.prod.js:

// Project
  // client
    //images (where the actual pictures are stored)
    //data (where galleryObject.js resides)
    //main.js (where everything eventually becomes bundled

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.css$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    },
    // images
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: path.join(__dirname, 'client'),
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  }
};

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [

    './client/main'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.scss$/, 
      include: path.join(__dirname, 'client'),
      loaders: ["style", "css", "sass"]
    },
    // IMAGES
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: path.join(__dirname, 'client'),
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  }
};

我敢肯定，我的复制面食和缺乏知识的组合，当涉及到网络包是错误的。糟糕的开发。但是我真的很想了解一下我在没有让我的图像显示的情况下还做错了什么

干杯

编辑显示图像如何进入商店：

project/client/store.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

import { createStore, compose } from "redux";
import { syncHistoryWithStore } from "react-router-redux";
import { browserHistory } from "react-router";


// all roots



// root reducer

import rootReducer from "./reducers/mainReducer";

// data Objects

import cakeGallery from './data/galleryObject'; // the object is passed into the default state


// default state object

const defaultState = {

  cakeGallery,
  open: false

};


const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

function cakeGallery(state={}, action){
  console.log("cake gallery reducer")
  console.log(state, action);
  return state;
}

export default cakeGallery; // this gets combined with another reducer 
// in project/client/reducers/mainReducer.js

// this file is basically creating a component that will
// "sprinkle on" props and dispatchers to our Main component

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../actions/userActions.js";

import StoreShell from "./StoreShell.js";

// cakeGallery is now known simply as images when referred to in components
function mapStateToProps(state){
  return {
    images: state.cakeGallery,
    open: state.open
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators, dispatch);
}




const App = connect(mapStateToProps, mapDispatchToProps)(StoreShell);
                                          // immediately call what component you want to connect to (Main)
export default App;

import Main from "./Main"

const StoreShell = React.createClass({
  render(){
    return(
        <div>
          <Main {...this.props} />
        </div>
      )
  }
})

export default StoreShell;

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

// SOLVED IT 
app.use(express.static(path.join(__dirname + "/client")));


app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

project/client/reducers/cakeGalleryReducer.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

import { createStore, compose } from "redux";
import { syncHistoryWithStore } from "react-router-redux";
import { browserHistory } from "react-router";


// all roots



// root reducer

import rootReducer from "./reducers/mainReducer";

// data Objects

import cakeGallery from './data/galleryObject'; // the object is passed into the default state


// default state object

const defaultState = {

  cakeGallery,
  open: false

};


const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

function cakeGallery(state={}, action){
  console.log("cake gallery reducer")
  console.log(state, action);
  return state;
}

export default cakeGallery; // this gets combined with another reducer 
// in project/client/reducers/mainReducer.js

// this file is basically creating a component that will
// "sprinkle on" props and dispatchers to our Main component

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../actions/userActions.js";

import StoreShell from "./StoreShell.js";

// cakeGallery is now known simply as images when referred to in components
function mapStateToProps(state){
  return {
    images: state.cakeGallery,
    open: state.open
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators, dispatch);
}




const App = connect(mapStateToProps, mapDispatchToProps)(StoreShell);
                                          // immediately call what component you want to connect to (Main)
export default App;

import Main from "./Main"

const StoreShell = React.createClass({
  render(){
    return(
        <div>
          <Main {...this.props} />
        </div>
      )
  }
})

export default StoreShell;

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

// SOLVED IT 
app.use(express.static(path.join(__dirname + "/client")));


app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

我想这就是我遇到麻烦的地方。加载页面时，

cakeGalleryReducer.js

函数正在启动，我是否在不断传递一个空对象？这是我的javascript控制台的一张图片，当页面最初加载时，它似乎仍然有一个应该已满的对象

project/client/components/App.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

import { createStore, compose } from "redux";
import { syncHistoryWithStore } from "react-router-redux";
import { browserHistory } from "react-router";


// all roots



// root reducer

import rootReducer from "./reducers/mainReducer";

// data Objects

import cakeGallery from './data/galleryObject'; // the object is passed into the default state


// default state object

const defaultState = {

  cakeGallery,
  open: false

};


const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

function cakeGallery(state={}, action){
  console.log("cake gallery reducer")
  console.log(state, action);
  return state;
}

export default cakeGallery; // this gets combined with another reducer 
// in project/client/reducers/mainReducer.js

// this file is basically creating a component that will
// "sprinkle on" props and dispatchers to our Main component

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../actions/userActions.js";

import StoreShell from "./StoreShell.js";

// cakeGallery is now known simply as images when referred to in components
function mapStateToProps(state){
  return {
    images: state.cakeGallery,
    open: state.open
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators, dispatch);
}




const App = connect(mapStateToProps, mapDispatchToProps)(StoreShell);
                                          // immediately call what component you want to connect to (Main)
export default App;

import Main from "./Main"

const StoreShell = React.createClass({
  render(){
    return(
        <div>
          <Main {...this.props} />
        </div>
      )
  }
})

export default StoreShell;

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

// SOLVED IT 
app.use(express.static(path.join(__dirname + "/client")));


app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

project/client/components/StoreShell.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

import { createStore, compose } from "redux";
import { syncHistoryWithStore } from "react-router-redux";
import { browserHistory } from "react-router";


// all roots



// root reducer

import rootReducer from "./reducers/mainReducer";

// data Objects

import cakeGallery from './data/galleryObject'; // the object is passed into the default state


// default state object

const defaultState = {

  cakeGallery,
  open: false

};


const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

function cakeGallery(state={}, action){
  console.log("cake gallery reducer")
  console.log(state, action);
  return state;
}

export default cakeGallery; // this gets combined with another reducer 
// in project/client/reducers/mainReducer.js

// this file is basically creating a component that will
// "sprinkle on" props and dispatchers to our Main component

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../actions/userActions.js";

import StoreShell from "./StoreShell.js";

// cakeGallery is now known simply as images when referred to in components
function mapStateToProps(state){
  return {
    images: state.cakeGallery,
    open: state.open
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators, dispatch);
}




const App = connect(mapStateToProps, mapDispatchToProps)(StoreShell);
                                          // immediately call what component you want to connect to (Main)
export default App;

import Main from "./Main"

const StoreShell = React.createClass({
  render(){
    return(
        <div>
          <Main {...this.props} />
        </div>
      )
  }
})

export default StoreShell;

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

// SOLVED IT 
app.use(express.static(path.join(__dirname + "/client")));


app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

从“/Main”导入Main
const StoreShell=React.createClass({
render（）{
返回(
)
}
})
导出默认的StoreShell；

---

从这里开始，可以通过

{this.props.images}

网页为您导入图像，而不是通过

{this.props.images}访问Intal
galleryObject.js
中的信息

我建议您导入
galleryObject.js
中所需的所有图像，并在每个糕点对象中保留图像的引用。然后，当它到达
主组件时，您可以直接使用它们。
查看它。

devServer.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

import { createStore, compose } from "redux";
import { syncHistoryWithStore } from "react-router-redux";
import { browserHistory } from "react-router";


// all roots



// root reducer

import rootReducer from "./reducers/mainReducer";

// data Objects

import cakeGallery from './data/galleryObject'; // the object is passed into the default state


// default state object

const defaultState = {

  cakeGallery,
  open: false

};


const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

function cakeGallery(state={}, action){
  console.log("cake gallery reducer")
  console.log(state, action);
  return state;
}

export default cakeGallery; // this gets combined with another reducer 
// in project/client/reducers/mainReducer.js

// this file is basically creating a component that will
// "sprinkle on" props and dispatchers to our Main component

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../actions/userActions.js";

import StoreShell from "./StoreShell.js";

// cakeGallery is now known simply as images when referred to in components
function mapStateToProps(state){
  return {
    images: state.cakeGallery,
    open: state.open
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators, dispatch);
}




const App = connect(mapStateToProps, mapDispatchToProps)(StoreShell);
                                          // immediately call what component you want to connect to (Main)
export default App;

import Main from "./Main"

const StoreShell = React.createClass({
  render(){
    return(
        <div>
          <Main {...this.props} />
        </div>
      )
  }
})

export default StoreShell;

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var PORT = process.env.PORT || 7770

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

// SOLVED IT 
app.use(express.static(path.join(__dirname + "/client")));


app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(PORT, "localhost", function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(__dirname);
  console.log('Listening at http://localhost:7770');
});

所以这一行：
app.use（express.static（path.join（uu dirname+“/client”））
最初不在我的副本d
devServer.js
中。我所做的是让我的静态文件（css、javascript和最重要的图像）可以使用允许您提供静态文件的

这就是我通常解决这个问题的方式，但我假设图像已经包含在我的解决方案上面和下面的代码中

谢谢大家的意见。
您的主机是否有404错误？显示如何导入和使用图像的一些代码您是否尝试删除商店中的
/client
部分？请记住，图像URL是URL，而不是指向所需内容的路径。因此，图像加载器仅适用于您在js代码中导入/需要的内容。尝试直接在浏览器上访问图像，看看它是否有助于调试问题。我没有任何404错误，我将编辑帖子以显示信息流良好的建议。我还尝试了多种路径，如
/client/images/[image].jpg
和
/images/[image].jpg
。我现在将签出完整的url，这也是一个很好的建议。请尝试
图像：“/client/images/cake1.jpg”，
直接访问图像不幸无效@法比奥·苏塞托