无法在 javascript 中导入图像。模块解析失败：意外字符 '�' (1:0)答案

【问题标题】：Can not import image in javascript . Module parse failed: Unexpected character '�' (1:0)无法在 javascript 中导入图像。模块解析失败：意外字符 '�' (1:0)
【发布时间】：2021-10-28 16:22:42
【问题描述】：

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

完整的信息说 ./bluecardback.jpg 1:0 模块解析失败：意外字符 '�' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders （此二进制文件的源代码省略）

webpack.config：

var webpack = require('webpack');
var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");


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

package.json:

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

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

【问题讨论】：

import is for importing components，这是代码。您不能导入 .jpg 文件。您正在从 jpg 文件中导入“背景”；怎么可能在 JPG 文件中定义背景函数？
我在我的组件中使用这样的导入作为属性
url(${background}),}}>

标签： javascript css reactjs webpack

【解决方案1】：

试试这个const background = require('../bluecardback.jpg').default;

或者你在哪里使用 jpg 之类的

<img src={require('../bluecardback.jpg').default} />

【讨论】：

不幸的是，此解决方案仍然存在问题