Webpack 图像不加载 404答案

【问题标题】：Webpack image doesn't load 404Webpack 图像不加载 404
【发布时间】：2018-06-28 07:01:59
【问题描述】：

我正在使用 react 和 webpack，我正在尝试加载图像但得到 404。

const ImageComponent = ({ path }) => (
    <img src={path} />
);

路径类似于assets/images/img.png。 Assets 文件夹位于所有应用程序文件所在的src 附近。

我尝试使用webpack-file-loader，但不知道如何解决 404 问题。

这是我到file-loader 的加载器，我尝试了几个选项：

像这样：

  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
    loader: 'file-loader',
    exclude: /(node_modules)/,
  },

这个：

  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
    loader: 'file-loader',
    exclude: /(node_modules)/,
    include: [
      path.resolve(__dirname, 'assets/img'),
    ],
  },

这个：

  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
    loader: 'file-loader',
    exclude: /(node_modules)/,
    include: [
      path.resolve(__dirname, 'assets/img'),
    ],
    options: {
      publicPath: '/',
      outputPath: 'assets/',
    },
  },

以上所有选项都给了我相同的结果。有什么想法吗？

【问题讨论】：

如何在 ImageComponent 中导入图像？
@MarekTakac 否，因为图像来自参数。我不知道要导入什么图像。我想办法让它与webpack-copy-plugin 一起工作，我认为文件加载器只有在显式导入文件时才好用。我说的对吗？

标签： reactjs webpack webpack-file-loader

【解决方案1】：

将 esModule: false 添加到 file-loader 图像（jpeg,jpg,png,gif）的 options，

{
  test: /\.(jpe?g|png|gif)$/,
  loader: 'file-loader',
    options: {
      esModule: false,
      outputPath: 'assets/',
    },
}

为我工作！

我得到了答复：404-not-found-webpack-image

【讨论】：