图片未显示在 React App 中答案

【问题标题】：Images not displaying in React App图片未显示在 React App 中
【发布时间】：2025-11-24 21:45:02
【问题描述】：

下午好，

我正在开发一个 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 的意大利面-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'
        ]
    }
    ]
  }
};

我敢肯定，我对 web pack 的复制和缺乏知识的结合是错误的。糟糕的开发。但我真的很感激一些关于我做错了什么else没有让我的图像显示的见解。

干杯

编辑展示图片如何进入商店：

project/client/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} 访问。

【问题讨论】：

你的控制台有 404 错误吗？显示一些关于如何导入和使用图像的代码
您是否尝试过删除商店中的./client 部分？请记住，图像 url 是 url，而不是您需要的东西的路径。因此，图像加载器仅适用于您在 js 代码中导入/需要的内容。也尝试直接在浏览器中访问localhost:<dev_server_port>/client/images/cake1.jpg 上的图像，看看它是否有助于调试问题。
我没有任何 404 错误，我将编辑帖子以显示信息流好建议。我还尝试了各种路径，例如./client/images/[image].jpg 和./images/[image].jpg。我现在将检查完整的网址也是一个很好的建议。
试试image: "/client/images/cake1.jpg",
不幸的是，直接访问图像不起作用。 @fabio.sussetto

标签： javascript node.js reactjs webpack redux

【解决方案1】：

Webpack 为您导入图像并不那么聪明。

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

【讨论】：

【解决方案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 和最重要的图像）可访问，它允许您提供静态文件。

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

感谢大家的意见。

【讨论】：