Question

一切都在开发中很有效，但是当我尝试构建生产时，图像不会显示在页面上。它们确实显示在适当的文件夹中（即我的生产文件夹中有一个图像子文件夹，其中包含图像）。当我查看浏览器中的文件夹（Sources）时，images文件夹不存在。看起来反应构建由于某种原因不知道该文件夹，即使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

所以似乎答案只是改变＆＃39; /＆＃39;到＆＃39; ./'和＆＃39;图像/＆＃39;到＆＃39; ./ images /＆＃39;。我通过实验来达到这个目的。希望答案可以帮助其他人。

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）

1 个答案: