模块解析失败：意外字符“？” (1:0) 您可能需要适当的加载程序来处理此文件类型

Question

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

\n\n

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

\n\n

现在我想在运行于http://localhost:6060 的styleguidist 服务器中显示条形码图像。\n我的 styleguidist readme.md 的代码

\n\n

```jsx\nvar Macybarcode = require(\'../../../containers/assets/img/macy/barcode.png\');\nconst barcode_img = Macybarcode;\nconst barcode_no = "33527111690008";\n\n<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />   \n```\n

\n\n

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

\n\n

请点击查看错误控制台

\n

Answer 1

您需要图像的 url-loader

\n\n

使用：

\n\n

npm install url-loader --save

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n