尽管有文件加载器（url-loader），但图像没有在使用 Webpack 的 React 应用程序中加载答案

【问题标题】：Images not loading in React app with Webpack despite having file loaders (url-loader)尽管有文件加载器（url-loader），但图像没有在使用 Webpack 的 React 应用程序中加载
【发布时间】：2019-09-12 02:11:32
【问题描述】：

我有一个使用 Webpack 和 Babel 的 React 应用程序。我正在尝试加载图像（svg，png ...），但我不断收到错误“意外字符'�'（1：0）> 1 |�PNG”。我安装了 url-loader (npm install url-loader --save-dev)，它应该有助于在使用 Webpack 时加载图像。什么都没有改变。

这是我的 webpack.config.js：

const {NODE_ENV} = process.env;

module.exports = {
  mode: NODE_ENV === 'production' ? NODE_ENV : 'development',
  entry: ['./client/index.js'],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 25000
            }
          }
        ]
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },

  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js',
  },

};

这就是我尝试加载图像的方式：

import hiker from './hiker.png';
<img src={hiker} />

任何帮助将不胜感激，谢谢。

【问题讨论】：

你能展示文件架构吗？
@Muath 哪个？它很好地找到了图像，只是无法剖析它:(
我想提供帮助，但要考虑的变量太多。请发布一个github链接。
@MattCarlotta github.com/emmaorhun/intergalactic-ecommerce

标签： reactjs svg webpack babeljs webpack-file-loader

【解决方案1】：

这里有几个问题。首先，您使用的是指向index.js 的babel-node。如果你想让它指向你的 webpack 配置，那么你需要从 package.json 的开发者 scripts 中删除 index.js：

"dev": "nodemon --exec babel-node",

并将webpack.config.js 重命名为babel.config.js。

不幸的是，要让您的项目正常运行还需要做很多工作。看来此设置使用了一些 server-side-rendering 配置。诚然，我从来没有使用过koa，所以在这里我帮不上什么忙。

好像也有点过时了，有人updated it and included a walkthrough。

也就是说，如果您只是在学习，我建议您转向对新开发人员友好的样板。

我建议从 create-react-app 开始，这会掩盖很多这种 webpack 配置。

或者，您可以下载我的 react-starter-kit，它有一个公开的 webpack 配置，您可以使用（如果需要）并使用 webpack-dev-server 进行开发，使用 webpack 和非常简单的 express 配置进行生产.

由你决定。

祝你好运！

【讨论】：