Question

大家好，我在将图像导入到项目中遇到一些问题。我尝试过以以前的工作方式（但当时不是）将图像导入旧项目中。我导入的图片如下：

import Fav from '../img/fav.png'

我的文件路径在src / img / fav.png中，我正在尝试从src / components / App.jsx导入

所以我的错误是：

ERROR in ./img/fav.png 1:0
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)
 @ ./components/App.jsx 3:0-33
 @ ./entry.jsx
 @ multi ./entry.jsx

我试图在网上找不到一些解决方案，但我找不到。感谢您的帮助

Answer 1

您需要一个webpack加载器来加载图像，例如文件加载器：

{
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: 'images',
      },
    },
  ],
},

Answer 2

解决方案在这里：

{
    test: /\.(png|svg|jpg|gif)$/,
    include: path.resolve(__dirname, 'src/assets'),
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }

默认情况下包含路径。

在反应中导入图像有问题

2 个答案: