在反应中导入图像时遇到问题答案

【问题标题】：Have problem with importing image in react在反应中导入图像时遇到问题
【发布时间】：2020-03-18 16:00:31
【问题描述】：

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

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

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

【问题讨论】：

标签： html css reactjs image webpack

【解决方案1】：

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

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

【讨论】：

谢谢，我找到了我的解决方案:)

【解决方案2】：

解决方案在这里：

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

默认包含路径。

【讨论】：