2

一切都在开发中运行良好，但是当我尝试为生产构建时，图像不会显示在页面上。它们确实出现在正确的文件夹中（即我的生产文件夹有一个包含图像的图像子文件夹）。当我在浏览器中查看文件夹（来源）时，图像文件夹不存在。尽管 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" />

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

4

1 回答 1

1

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

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