javascript - require(imagePath) 上的 webpack 编译错误

Question

我正在尝试在 ReactJS 中动态加载图像。到目前为止，我在网上找到的方法都不起作用。

我的 react 组件如下所示:

class ReadOnlyTableRow extends React.Component {
    render() {
        let optionImage = require('../assets/option.jpg');
        return (
            <tr>
                <td>
                <img src={optionImage} />
                    {this.props.data.type}
                </td>
                <td>{this.props.data.symbol}</td>
            </tr> 
        );
    }
}

我得到的 webpack 错误是这样的:

ERROR in ./src/assets/option.jpg Module parse failed: C:\Java\src\options\web\src\assets\option.jpg Unexpected character '?' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '?' (1:0)

我尝试向我的 webpack 添加加载程序，但这给出了不同的错误。所以我从我的 webconfig 文件中删除了它。

和我的 webpack.config 文件

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      }   
    ]
  }
};

我错过了什么？还是做错了？谢谢，马特

附录:当我将其包含在我的 webpack.config 中时

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=25000'
      }         
    ]
  }

我收到另一个错误:

WARNING in Loader C:\Java\src\options\web\node_modules\url\url.js?limit=25000 didn't return a function

我的项目结构是这样的:源代码

|---Components
     ---ReadOnlyTableRow 
|---assets
     ---option.jpb

这是 package.config 文件

{
  "name": "engine",
  "version": "1.0.0",
  "description": "engine UI written in React",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --progress --inline --port 8112",
    "build": "webpack"
  },
  "keywords": [],
  "author": "mpr",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "moment": "^2.18.1",
    "react": "^0.14.6",
    "react-bootstrap": "^0.30.5",
    "react-currency-input": "^1.2.6",
    "react-date-picker": "^5.3.28",
    "react-dom": "^0.14.6",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.16.2"
  },
  "devDependencies": {
    "file-loader": "^1.1.5"
  }
}

谢谢，马特

Answer 1

为了解决这个问题，我根据上面评论中的 @Emad 建议使用了文件加载器。此外，我需要使用不同的 web.config，它与为文件加载器提供的说明不同。 web.config 更改如下。

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {   
    loaders: [     
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        exclude: /node_modules/,
        options: {}
      }        
    ]     
  }
};

我更改了 javascript 代码以通过 import 语句提取图像:

import reloadImage from './../assets/reload-sm.png';

谢谢马特