模块解析失败：意外字符' '（1：0）您可能需要适当的加载程序来处理此文件类型

Question

我在我的反应应用程序中使用styleguidist，这是我的styleguid.config.js文件的代码：

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }
      ]
    }
  }
}

现在，我想在运行在http：// localhost：6060的 styleguidist服务器中显示条形码图像。 我的风格导师readme.md的代码

```jsx
var Macybarcode = require('../../../containers/assets/img/macy/barcode.png');
const barcode_img = Macybarcode;
const barcode_no = "33527111690008";

<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />   
```

但每当我试图显示图像时，我的服务器都会出现以下错误：

请单击以查看错误控制台

Answer 1

你需要url-loader图像

采用：

npm install url-loader --save

 module.exports = { webpackConfig: { module: { rules: [ // Babel loader, will use your project's .babelrc { test: /\\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }, // Other loaders that are needed for your components { test: /\\.css$/, loader: 'style-loader!css-loader?modules' }, { test: /\\.(jpg|png|svg)$/, use: { loader: 'url-loader', options: { limit: 25000 } } } ] } } } 

Answer 2

try this line inside    
 { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }