Question

我试图在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意外的字符＆＃39;？＆＃39; （1：0）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外字符＆＃39;？＆＃39; （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' ] }
      }   
    ]
  }
};

我错过了什么？或做错了？日Thnx，马特

附录：当我把它包含在我的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 didn＆t 返回一个函数

我的项目结构是这样的： SRC

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

Thnx，Matt

Answer 1

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

MainPage

我更改了我的javascript代码，通过import语句提取图片：

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: {}
      }        
    ]     
  }
};

日Thnx 马特

在require（imagePath）上的webpack编译错误

1 个答案: