reactとwebpackで画像を追加する際にエラーが発生しました

Question

私は小さなリアクションアプリusand webpack 3.xをビルドしています。ローカル画像を表示しようとすると、これらの画像は読み込まれません。エラー： モジュールが見つかりません：エラー： '/images/williamshakespeare.jpg'を解決できません。

これは私のリアクトコンポーネントです：

import * as React from 'react'; 

export const Quiz = (props) => { 
    return (
     <div className='row'> 
      <div className='col-md-4'> 
       <img src={require('/images/williamshakespeare.jpg')}/> 
      </div> 
     </div> 
    ); 
} 

これは私のwebpack.config.jsです。私は、url-loaderとfile-loderをインストールしました。

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var basePath = __dirname; 

module.exports = { 
    context: path.join(basePath, "src"), 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    // The entry point for the bundle. 
    entry: { 
     // App entry point. 
     app: './main.jsx', 
     appStyles: [ 
      './css/style.css', 
     ], 
     vendor: [ 
      "react", 
      "react-dom" 
     ], 
     vendorStyle: [ 
      '../node_modules/bootstrap/dist/css/bootstrap.css', 
      '../node_modules/font-awesome/css/font-awesome.css', 
     ], 
    }, 
    output: { 
     path: path.join(basePath, "dist"), 
     filename: '[name].js', 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.jsx?$/, // The Condition must match 
       exclude: /node_modules/, // The Condition must NOT match 
       loader: 'babel-loader', 
      }, 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: { 
        loader: 'css-loader', 
        }, 
       }), 
      }, 
      // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack 
      // Using here url-loader and file-loader 
      { 
       test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
      }, 
      { 
       test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'url-loader?limit=10000&mimetype=application/octet-stream' 
      }, 
      { 
       test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
      }, 
      { 
       test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'file-loader' 
      }, 
      { 
       test: /\.(png|jpg)$/, 
       exclude: /node_modules/, 
       loader: 'url-loader?limit=5000', 
      }, 
     ], 
    }, 
    devtool: 'inline-source-map', 
    devServer: { 
     contentBase: './dist', // Content base 
     inline: true, // Enable watch and live reload 
     host: 'localhost', 
     port: 8081, 
     stats: 'errors-only' // To show only errors in your bundle 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      filename: 'index.html', // Name of file in ./dist/ 
      template: 'index.html', // Name of template in ./src 
      hash: true // Append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting. 
     }), 
     new ExtractTextPlugin({ 
      filename: '[chunkhash].[name].css', 
      disable: false, 
      allChunks: true, 
     }), 
    ] 
}; 

そして、これが私のフォルダ構造です：

Answer 1

まあ、私のせいで、正しいパスではなく

<img src={require('/images/williamshakespeare.jpg')}/>