当React.js项目与webpack2捆绑在一起时，无法找到imgs：s

Question

一切都在开发中，所有图像都可以找到。但是当我将文件捆绑并上传到webhost时，无法找到产品img：s并返回错误：

这是我的.htaccess：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

这是我的webpack.config.prod.js文件：

//  PRODUCTION

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const entry = {
	app: path.join(process.cwd(), 'src/app.js')
}

const output = {
	path: path.join(__dirname, 'dist'),
	filename: 'bundle.min.js',
}

const plugins = [
	new webpack.DefinePlugin({
	  'process.env.NODE_ENV': JSON.stringify('production')
	}),
	new webpack.optimize.UglifyJsPlugin({
		mangle: false,
		compress: {
			warnings: false
		}
	}),
  new ExtractTextPlugin('bundle.css'), // creation of HTML files to serve your webpack bundles
	new HtmlWebpackPlugin({
		template: 'index-template.html'
	}),
	new webpack.optimize.CommonsChunkPlugin({
		name: 'bundle',
		filename: '[name].common.js'
	})
]

const config = {
  context: path.join(__dirname, 'src'),
  entry: entry,
	output: output,
	devtool: "source-map",
  module: {
    rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				include: path.join(__dirname, 'src'),
				use: "babel-loader"
			},
      {
			  test: /\.(png|jpg|gif)$/,
			  use: [{
					loader: 'url-loader',
					options: { limit: 10000, name: './img/[name].[ext]' } // Convert images < 10k to base64 strings (all in img folder)
				}]
			},
			{
				test: /\.(sass|scss)$/,
				use: ExtractTextPlugin.extract({
			    fallback: 'style-loader',
			    use: [
			      'css-loader',
			      {
							loader: 'postcss-loader',
							options: {
								plugins: (loader) => [ require('autoprefixer')() ]
							}
						},
			      'sass-loader',
			    ]
			  })
			}
		]
  },
	plugins: plugins,
	externals: {
	  jquery: 'jQuery'
	}
}

module.exports = config;

图像将在生命周期事件“componentDidMount”下的产品组件中导入：

import React, { Component } from 'react';
import Modal from 'react-modal';
import PropTypes from 'prop-types';

// Custom styles for Modal image
const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)',
    background            : 'rgba(0, 0, 0, 0.8)',
    width                 : '100vw',
    height                : '100vh',
    display               : 'flex',
    justifyContent        : 'center',
    alignItems            : 'center'
  }
};

class ProductItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false,
      image: '',
      previewImg: ''
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  // Set state object "modalIsOpen" to true when click on <ProductItem/> component
  openModal() {
    this.setState({
      modalIsOpen: true
    });
  }

  // Set state object "modalIsOpen" to false when click on <Modal/> component
  closeModal() {
    this.setState({
      modalIsOpen: false
    });
  }

  render(){
    // Create variables for all <ProductItem/> description options. If <PoductItem/> object has props or state, render it. Otherwise return null.
    var img = this.state.image ?
      <img src={this.state.image} /> :
      null;

    const name = this.props.product.stocked ?
      <h3>{this.props.product.name}</h3> :
      <h3><span style={{color: 'red'}}>
        {this.props.product.name}
      </span></h3>;

    var limited = this.props.product.limited ?
      <p>begränsad upplaga: {this.props.product.limited} ex</p> :
      null;

    var available = this.props.product.available ?
      <p>tillgängliga: {this.props.product.available} ex</p> :
      null;

    var price = this.props.product.price ?
      <p>{this.props.product.price}  kr</p> :
      null;

    var type = this.props.product.type ?
      <p>{this.props.product.type}</p> :
      null;

    var size = this.props.product.size ?
      <p>{this.props.product.size} cm</p> :
      null;

    var desc = this.props.product.desc ?
      <p>{this.props.product.desc}</p> :
      null;

    var modalName = this.props.product.name ?
      <h2>{this.props.product.name}</h2> :
      null;

    var modalDesc = this.props.product.desc ?
      <h2>{this.props.product.desc}</h2> :
      null;

    return (
      <div className="product hvr-sink" onClick={this.openModal}>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Modal image"
        >
          <div className="modal-box" onClick={this.closeModal}>
            <div className="close" onClick={this.closeModal}>x</div>
            <img className="modal-img" src={this.state.previewImg}/>
            {modalName}
            {modalDesc}
          </div>
        </Modal>
        {img}
        {name}
        {type}
        {limited}
        {available}
        {size}
        {price}
        {desc}
      </div>
    );
  };

  // Import all thumbnail + previewImg images and then() put them into state. If rejection occures catch() returns rejection reasen (err).
  componentDidMount() {
    import(`./images/${this.props.product.thumbnail}`).then(
      (image) => this.setState({
        image: image
      })
    ).catch((err) => {
      console.log('error thumbnail' + err);
    });
    import(`./images/${this.props.product.previewImg}`).then(
      (previewImg) => this.setState({
        previewImg: previewImg
      })
    ).catch((err) => {
      console.log('error previewImg' + err);
    });
  }
};

// Components expected proptypes
ProductItem.propTypes = {
  product: PropTypes.object.isRequired
}

export default ProductItem;

所有这些都适用于开发环境，图像渲染没有问题。此外，我的背景图像和其他通过SASS插入的img工作：

.background-img {
  position: fixed;
  background: url(../images/main.jpg) no-repeat center center scroll;
  background-size: cover;
  z-index: 0;
}

或通过“import”作为前“magdaImg”：

Answer 1

事实证明，我的项目不在根目录中。