(React + Webpack) 在 Dev 中加载图像，但不在 Production 中加载（file-loader + image-webpack-loader）

Question

在开发中一切都很好，但是当我尝试为生产构建时，图像没有显示在页面上。它们确实出现在适当的文件夹中（即我的生产文件夹有一个包含图像的图像子文件夹）。当我在浏览器中查看文件夹 (Sources) 时，图像文件夹不存在。尽管 webpack 正在正确构建它，但由于某种原因，反应构建似乎不知道该文件夹。我猜这是一个反应问题而不是 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" />

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

Answer 1

所以答案似乎只是将“/”更改为“./”，将 'images/' 更改为“./images/”。我是通过实验得出这个结论的。希望答案能帮助其他人。

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

(React + Webpack) 在 Dev 中加载图像，但不在 Production 中加载（file-loader + image-webpack-loader）

(React + Webpack) Images Loading in Dev, but not Production (file-loader + image-webpack-loader)

reactjs

webpack

webpack-file-loader