需要（imagePath）上的webpack编译错误答案

【问题标题】：webpack compile error on require(imagePath)需要（imagePath）上的webpack编译错误
【发布时间】：2017-11-08 20:30:31
【问题描述】：

我正在尝试在 ReactJS 中动态加载图像。到目前为止，我在互联网上找到的都没有奏效。

我的反应组件如下所示：

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 错误是这样的：

./src/assets/option.jpg 中的错误模块解析失败： C:\Java\src\options\web\src\assets\option.jpg 意外字符 '?' (1:0) 您可能需要适当的加载程序来处理此文件类型。 SyntaxError: 意外的字符 '?' (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'
      }         
    ]
  }

我收到另一个错误：

加载程序中的警告 C:\Java\src\options\web\node_modules\url\url.js?limit=25000 没有返回一个函数

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

|---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"
  }
}

谢谢，马特

【问题讨论】：

你需要file-loader或者url-loader来解析图片。还需要您在类 ReadOnlyTableRow 上方的图像。
那是什么装载机？我试过一个并没有解决任何问题。这是我使用的一个：{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }
loader: 'url?limit=25000'... 你的图片加载器是什么？！用这个怎么样：github.com/webpack-contrib/file-loader
与第一个错误相同的错误。问题可能是图像位于与组件处于同一级别的文件夹中吗？我在上面添加了更多注释
不，我不这么认为.. package.json 中的 devDependencies 是什么？

标签： javascript reactjs webpack

【解决方案1】：

为了解决这个问题，我根据上面 cmets 中的 @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';

谢谢马特

【讨论】：