リアクション - 静止画像をロード

Question

私はreact.jsにwebpackを使用していますが、静止画像を読み込むのに問題があります。 私の反応の中で、私はmainContainer.jsファイルなどのイメージを読み込もうとします。私はファイルローダーを試してみましたが、私はそれを正しく設定したと思いますが、まだwebpack simpleはイメージフォルダを認識しません。

ここにはGithubへのインラインリンクがあります。

<a href="/" className="author"> 
    <span className="name">Jane Doe</span><img src="./images/avatar.jpg" alt="" /> 
</a> 

とWebPACKの設定ファイルの一部：私はイメージをロードしようとしている私の.jsコンポーネントから

パート

module.exports = { 
    entry: './src/scripts/main.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'bundle.js', 
     // publicPath: '/dist' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: [ 
        { 
         loader: 'babel-loader', 
         options: { 
          presets: ['es2015'] 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.scss$/, 
       use: extractPlugin.extract({ 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
      { 
       test: /\.html$/, 
       use: ['html-loader'] 
      }, 
      { 
       test: /\.(jpg|png)$/, 
       use: [ 
        { 
         loader: 'file-loader', 
         options: { 
          name: '[name].[ext]', 
          outputPath: 'images/', 
          publicPath: 'images/' 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, 
       use: 'url-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     extractPlugin, 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }) 
     // new CleanWebpackPlugin(['dist']) 
    ] 
}; 

Answer 1

私はこれを行う方法は、CopyWebpackPluginを使用することですすべての静的イメージをビルドフォルダにコピーします。その後、彼らは、ルートレベルで存在しているかのように私のコンポーネントで、私はそれらを参照することができます：あなたのコンポーネントで

const copy = new CopyWebpackPlugin([ 
    { from: ROOT + '/images', to: 'images' } 
]); 

を：

<img src="/images/logo.png" />