javascript - 图片不显示在 React App 中

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 教程中复制了 pasta-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;

项目/客户端/reducers/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;

project/client/components/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 组件时，您可以直接使用它们。