无法在 JavaScript 中导入图像。模块解析失败：意外字符“？” (1:0)

Question

这个错误发生在我的反应应用程序中。

\n

完整消息显示\n./bluecardback.jpg 1:0\n模块解析失败: 意外字符 \'\xef\xbf\xbd\' (1:0)\n当前您可能需要适当的加载器来处理此文件类型没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders \n（此二进制文件省略源代码）

\n

webpack.config：

\n

var webpack = require(\'webpack\');\nvar path = require(\'path\');\nconst HtmlWebpackPlugin = require("html-webpack-plugin");\n\n\nmodule.exports = {\n  entry: [\n    path.join(__dirname, \'./src/index.js\')\n  ],\n  module: {\n    rules: [{\n      test: /\\.(js|jsx)$/,\n      exclude: /node_modules/,\n      use: [{ loader: \'babel-loader\', options: { presets: [\'@babel/preset-env\', \'@babel/react\'] } }],\n    },\n    { \n      test: /\\.(less|css|scss)$/, \n      use: [\'style-loader\', \'css-loader\', \'less-loader\',] \n    }\n    ]\n  },\n  output: {\n    path: path.join(__dirname, \'/public\'),\n    filename: \'bundle.js\'\n  },\n  devServer: {\n    contentBase: path.join(__dirname, \'/public\'),\n    // historyApiFallback: true\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: "./src/index.html"\n    })\n  ]\n}\n

\n

包.json：

\n

{\n  "name": "react-client",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "react": "^16.9.0",\n    "react-dnd": "^14.0.3",\n    "react-dnd-html5-backend": "^14.0.1",\n    "react-dom": "^16.9.0",\n    "react-scripts": "^4.0.3",\n    "socket.io-client": "^2.2.0"\n  },\n  "devDependencies": {\n    "@babel/cli": "^7.5.5",\n    "@babel/core": "^7.5.5",\n    "@babel/preset-env": "^7.5.5",\n    "@babel/preset-react": "^7.0.0",\n    "babel-loader": "^8.0.6",\n    "babel-register": "^6.26.0",\n    "css-loader": "^3.6.0",\n    "file-loader": "^4.3.0",\n    "html-webpack-plugin": "^3.2.0",\n    "less": "^3.10.3",\n    "less-loader": "^5.0.0",\n    "style-loader": "^1.3.0",\n    "url-loader": "^2.3.0",\n    "webpack": "^4.39.3",\n    "webpack-cli": "^3.3.7",\n    "webpack-dev-server": "^3.8.0"\n  },\n  "scripts": {\n    "start": "webpack-dev-server --mode=development --port=4000 --inline --hot",\n    "build": "webpack --mode=production"\n  }\n}\n

\n

我的导入看起来像这样import background from "../bluecardback.jpg";

\n

Answer 1

您的配置缺少jpg 文件的加载程序。

尝试添加这个

{
  test: /\.(png|jpe?g|gif)$/i,
  loader: 'file-loader'
}  

到你的module.rules数组中webpack.config。