（React + Webpack）イメージDevでロードされていますが、プロダクションではありません（ファイルローダー+ image-webpack-loader）

Question

すべてが開発にはうまくいきますが、プロダクション用にビルドしようとすると画像が表示されませんページ。それらは適切なフォルダに表示されます（つまり、私の制作フォルダには画像が存在する画像サブフォルダがあります）。ブラウザでフォルダ（ソース）を見ると、画像フォルダは存在しません。 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' 
      ] 
      }, 
     ]