在React App中不显示的图像
下午好，
我正在使用React / Redux应用程序，正在加载到我的商店的图像不显示。 我的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)
让我感到困惑的是绝对path不会导致图像被显示，状态被正确加载，因为我可以在我的React开发工具中看到它。 我甚至把一个超链接扔到一个在线图像，它的工作来testing它。
我的文件结构是这样的：
// Project // client //images (where the actual pictures are stored) //data (where galleryObject.js resides) //main.js (where everything eventually becomes bundled
根据我的经验，这通常是我的devServer.js如何访问我的项目中的静态文件的问题。 这里真正的承认是我从Wes Bos的Learn 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'); });
看到很多webpack的东西，我认为这是我出错的地方，所以我检查了tcoopman的image-webpack-loader。 我npm安装了模块，我的webpack.config.dev/prod.js和webpack.config.dev/prod.js的例子一样：
webpack.config.dev.js：
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' ] } ] } };
webpack.config.prod.js：
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' ] } ] } };
我敢肯定，当涉及到networking包时，我的复制面食和缺乏知识的组合是错误的。 坏的开发。 但我真的很感激一些见解，我还有什么做错了没有得到我的图像显示。
干杯
编辑显示图像如何进入商店：
项目/客户/ store.js
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;
项目/客户机/减速器/ cakeGalleryReducer.js
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
我想这里是我遇到麻烦的地方。 当页面加载时， cakeGalleryReducer.js函数正在触发，所以我不断地传递一个空对象？ 这是我的JavaScript控制台页面最初加载时的图片，它仍然好像我有一个对象，应该是完整的。 
项目/客户/组件/ App.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;
项目/客户/组件/ StoreShell.js
import Main from "./Main" const StoreShell = React.createClass({ render(){ return( <div> <Main {...this.props} /> </div> ) } }) export default StoreShell;
从这里开始， galleryObject.js的信息可以用{this.props.images} galleryObject.js访问。
Webpack不是很聪明的为你导入图像。
我build议你导入你的galleryObject.js所需的所有图像，并保留每个糕点对象中的图像的引用。 然后，当它到达Main组件，你可以直接使用它们。
一探究竟
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 })); // 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(__dirname + "/client"))); 本来不是在我的副本面食devServer.js 。 我所做的是使用express.static中间件使我的静态文件（CSS，JavaScript和最重要的图像）可访问，允许您提供静态文件。
这是我通常解决这个问题的方法，但是我认为图像已经在上面和下面的代码中被覆盖了。
感谢大家的意见。