（React + Webpack）在 Dev 中加载图像，但不是在生产中加载（file-loader + image-webpack-loader）答案

【问题标题】：(React + Webpack) Images Loading in Dev, but not Production (file-loader + image-webpack-loader)（React + Webpack）在 Dev 中加载图像，但不是在生产中加载（file-loader + image-webpack-loader）
【发布时间】：2017-07-17 16:48:26
【问题描述】：

在开发中一切都很好，但是当我尝试为生产构建时，图像不会显示在页面上。它们确实出现在正确的文件夹中（即我的生产文件夹有一个带有图像的图像子文件夹）。当我在浏览器中查看文件夹（来源）时，图像文件夹不存在。尽管 webpack 正在正确构建它，但由于某种原因，react 构建似乎不知道该文件夹。我猜这是一个反应问题，而不是 webpack 问题，但我对这两个问题还是新手。我找到的所有资源似乎都表明我所拥有的应该可以工作，但我觉得我错过了一些东西。

webpack.config.js：

rules: [
      ...
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          'file-loader?name=[name].[ext]&publicPath=/&outputPath=images/',
          'image-webpack-loader'
        ]
      },
    ]

使用中：

<img src={ require( './images/shopping-cart.png' ) } alt="shopping cart" />

编辑：我现在显示了包含图像的图像文件夹（表面上），但是图像完全损坏了。即使只是在浏览器中从文件夹中检查它也不起作用。

【问题讨论】：

标签： reactjs webpack webpack-file-loader

【解决方案1】：

所以看起来答案只是将“/”更改为“./”，将“images/”更改为“./images/”。我通过实验得出了这个结论。希望答案可以帮助其他人。

rules: [
          ...
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
              'file-loader?name=[name].[ext]&publicPath=./&outputPath=./images/',
              'image-webpack-loader'
            ]
          },
        ]

【讨论】：