当 React.js 项目与 webpack2 捆绑时找不到 imgs:s

Question

一切都在开发中，所有图像都已找到。但是当我捆绑我的文件并上传到虚拟主机时，找不到产品 img:s 并且 returns 错误：

这是我的.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

原来是我的项目不在根目录下的问题。

当 React.js 项目与 webpack2 捆绑时找不到 imgs:s

Cant find imgs:s when React.js project is bundled with webpack2

.htaccess

reactjs

webpack-2