为什么我的图片没有加载到我的页面中？

Question

我使用 webpack 并做出反应。我写了这行代码；

import image from './images/earthmap.jpg'

我在控制台上得到这个错误

 Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

这是我的 webpack 配置文件。我尝试了几种方法，但都不起作用。

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index.bundle.js",
  },
  devServer: {
    port: 3010,
    watchContentBase: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: ["url-loader"],
      },
      {
        test: /\.(png|svg|jpe?g|gif|jpg)$/,
        include: /images/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "images/",
              publicPath: "images/",
            },
          },
        ],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

我尝试了其他图像和图像文件格式，但我遇到了同样的问题。

Answer 1

你需要使用file-loader来加载图片。

{
    test: /\.(png|jpg|ttf|eot|woff|woff2)(\?.*)?$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[path][name].[ext]",
        },
      },
    ],
  },

Answer 2

很可能是您的代码中某处有一个特殊字符。

这可能是一个行尾，或类似复制到代码或 jpg 中的内容。