Question

下午好，

我正在使用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)

令我感到困惑的是，绝对路径不会导致图像显示，状态正确加载，因为我可以在我的React开发工具中看到它。我甚至在网上投入了一个图片的超链接，它可以测试它。

我的文件结构如下：

// 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的pasta-d，这就是它的样子：

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'
        ]
    }
    ]
  }
};

我确信，在网络包方面，我复制意大利面和缺乏知识的组合是错误的。糟糕的开发。但我真的很感激有关 else 我做错了什么的见解没有让我的图像显示出来。

干杯

修改，显示图片如何进入商店：

项目/客户端/ 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}访问。

Answer 1

Webpack并不是那么聪明的导入图像。

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

Answer 2

查看

<强> 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 middleware访问我的静态文件（css，javascript，以及最重要的图像）。

这就是我通常解决这个问题的方法，但我认为图像已经包含在我的解决方案上方和下方的代码中。

感谢大家的投入。

图像未显示在React App中

2 个答案: