2
下午好，图片不显示在应用程序做出反应
我一个反应，和/终极版应用程序，并正在加载到我的店里不显示图像的工作。我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开发工具。我甚至在网上发布了一个图像超链接，它可以用来测试它。
我的文件结构如下所示：
// Project
// client
//images (where the actual pictures are stored)
//data (where galleryObject.js resides)
//main.js (where everything eventually becomes bundled
在我的经验，这通常是与我有多么devServer.js在我的项目访问静态文件的问题。 真正入场这里是我复制面食-d这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看起来都一样的例子，从tcoopman：
个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'
]
}
]
}
};
我敢肯定，我的副本面食和知识的缺乏，当它的组合来到网络包有问题。糟糕的开发。但我真的很感谢其他我做错了没有让我的图像显示。
干杯
编辑显示图像如何让它进店：
项目/客户/ 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控制台的图片，当页面最初加载时，它仍然看起来像我有一个应该是充满的对象。 
project/client/components/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;
从这里在INTIAL galleryObject.js访问作为{this.props.images}的信息。
您的控制台是否有404错误？显示一些你如何导入和使用图像的代码 – xiaofan2406
你有没有尝试删除你的商店中的''。/ client''部分？记住图像网址是网址，而不是你需要的东西的路径。所以图像加载器只适用于您在js代码中导入/需要的东西。也可以直接在浏览器中访问http：// localhost： /client/images/cake1.jpg图片，看看它是否有助于调试问题。 –
我没有任何404错误，我将编辑帖子以显示信息流的良好建议。我也尝试了各种各样的路径，比如'./client/images/ [image] .jpg'和'./images/ [image] .jpg'。我会检查完整的网址，现在也是一个很好的建议。 – m00saca