无法导入图像做出反应答案

【问题标题】：Can not import images to react无法导入图像做出反应
【发布时间】：2021-06-11 07:57:33
【问题描述】：

您好，我是 React 新手，我一直在尝试显示一些图像，但出现以下错误。

   /src/components/rook.png:1
�PNG


SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Object.newLoader [as .js] (/home/gecf/Projects/reactTests/chess/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/gecf/Projects/reactTests/chess/src/components/Tile.js:2:1)

我尝试导入图像的代码如下所示：

import logo  from './rook.png';

我的文件结构是 src/components/tile.js 和 src/components/rook.png。

我的 webpack.config.js 如下所示：

  module.exports = {
      module: {
        rules: [
          {
            test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
            use: 'file-loader',
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
            },
          },
        ],
      },
    };

我也尝试过要求 url，但在这两种情况下都会出现相同的错误。

【问题讨论】：

你没有使用 create-react-app 吗？还有，webpack 4 还是 5？
不，我没有使用 create-react-app。我遵循了一个不需要我这样做的教程。至于 webpack，我使用的是 webpack 5。

标签： node.js reactjs webpack

【解决方案1】：

始终保留任何组件的首字母大写

import Logo  from './rook.png';

【讨论】：

为什么会这样？
约定，也有很多组件与html元素同名，所以要避免这些错误
感谢您的建议，但这不是问题的原因。我相信这与文件夹的结构有关，但我不知道它是什么。