title: Loading local images using react and webpack 4
body: <p>I'm building a react app which renders the JSON data from server using node and express.The problem i'm facing the local images won't load.
  <strong>JSON</strong></p>
  
  <pre><code>{
    "items":[
    {
      "_id": 1,
      "isActive": true,
      "image": "../images/pic1.jpg",
      "imageTitle":"Picture 1",
      "imageDesc": "Nisi cupidatat nulla culpa ullamco id reprehenderit laborum pariatur non reprehenderit ipsum nostrud magna nisi. Eu exercitation id adipisicing ad aute quis adipisicing quis sit eiusmod ut commodo quis. Enim magna labore cupidatat laborum reprehenderit ipsum ullamco excepteur nisi occaecat officia ipsum.\r\n"
    }]
  }
  </code></pre>
  
  <p>All the images are on the <strong>src>app>client>images</strong> folder and the codes are in client folder.</p>
  
  <p>The App renders a grid of components from JSON. Each grid is a listComponent which has a checkbox,an image with title and desc.  </p>
  
  <p>listComponent.js </p>
  
  <pre><code> import React, { Component } from 'react';
   import PropTypes from 'prop-types';
   import CheckBox from '../common/checkbox';
   import ImageComponent from '../common/image';
  
  class ListComponent extends React.Component{
  
      constructor(props){
          super(props);
          this.handleArray = this.handleArray.bind(this);
      }
      handleArray(){
          console.log('List component props',this.props);
          return this.props.items.map((val) =&gt;
                  &lt;div className = "col" key = {val._id} &gt;
                      &lt;header&gt;
                          &lt;CheckBox isSelected = {val.isActive}/&gt;
                      &lt;/header&gt;
                      &lt;section&gt;
                          &lt;ImageComponent image = {val.image} imageTitle ={val.imageTitle} imageDesc = {val.imageDesc} /&gt;
                      &lt;/section&gt;
                      &lt;footer&gt;
                          &lt;i class = "fa fa-image-icon"&gt;&lt;/i&gt;
                          &lt;i class = "fa fa-info-circle"&gt;&lt;/i&gt;
                      &lt;/footer&gt; 
                  &lt;/div&gt;
              );
      }
  
      render(){
  
          return(
              &lt;div class ="flex-Container"&gt;
                  {this.handleArray()}
              &lt;/div&gt;         
          );
  
      }
  }
  
  export default ListComponent;
  </code></pre>
  
  <p>I'm able to retrieve the exact JSON Data and renders all the component except the image.</p>
  
  <p>ImageComponent.js</p>
  
  <pre><code>class ImageComponent extends Component {
      render() {
          const selectedImg = this.props.image;//
          return (
              &lt;figure&gt;
                  &lt;img src = { require('selectedImg') } width ='100' height ='100' alt='test'/&gt;
                  &lt;figcaption&gt;{this.props.imageTitle}&lt;/figcaption&gt;
                  &lt;div&gt;{this.props.imageDesc}&lt;/div&gt;
              &lt;/figure&gt;
          );
      }
  }
  
  export default ImageComponent;
  </code></pre>
  
  <p>I looked through many answers in stackoverflow, still none of its working.
  I noticed one thing if in the ImageComponent:             </p>
  
  <pre><code> &lt;img src = { require('../images/pic1.jpg') } width ='100' height ='100' alt='test'/&gt;
  </code></pre>
  
  <p>I'm stating the relative path (the exact path as in JSON data),it's retrieving 
  the image but with the data-fetching using server it's not showing.</p>
  
  <p>The error:</p>
  
  <pre><code>   ERROR in ./src/app/client/common/image.js
  Module not found: Error: Can't resolve '../images/pic1.png' in 'D:\Sucheta\react-redux-json-with-webpack\src\app\client\common'
   @ ./src/app/client/common/image.js 13:11-40
   @ ./src/app/client/components/listComponent.js
   @ ./src/app/client/containers/App.js
   @ ./src/app/index.js
  </code></pre>
  
  <p>Note:I'm not using create-react-app 
  webpack.config.js</p>
  
  <pre><code>const path = require('path');
  const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  const HTMLWebpackPlugin = require('html-webpack-plugin');
  
  const DIST_DIR = path.resolve(__dirname, 'public');
  const SRC_DIR = path.resolve(__dirname, 'src');
  
  const BrowserSyncPluginConfig = new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'http://localhost:8080/',
      reload: false
  });
  
  const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
      template: './src/app/index.html',
      filename: 'index.html'
  });
  
  const config = {
      mode: 'development',
      entry: SRC_DIR + '/app/',
      output: {
          path: DIST_DIR,
          filename: 'bundle.js'
      },
  
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: [{ loader: 'babel-loader' }]
              },
              {
                  test: /\.html$/,
                  use: [
                      {
                          loader: 'html-loader',
                          options: {
                              //minimize: true
                          }
                      }
                  ]
              },
              {
                  test: /\.css$/,
                  use: [
                      { loader: 'style-loader' },
                      {
                          loader: 'css-loader',
                          options: {
                              minimize: true
                          }
                      }
                  ]
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use: [
                      { loader: 'file-loader',
                          options: {
                              outputPath: 'assets/'
                          }
                      }
                  ]
              }
          ]
      },
  
      resolve: {
          extensions: ['.js', '.jsx', 'css']
      },
  
      devServer: {
          contentBase: path.join(DIST_DIR)
      },
  
      plugins: [
          BrowserSyncPluginConfig,
          HTMLWebpackPluginConfig
      ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p>The folder structure:</p>
  
  <pre><code> --node_modules
     --src
       --app
           --client
                -common
                   -checkbox.js
                   -image.js
                -components
                   -listComponent.js
                -containers
                   -App.js
                -css
                -images
                  -pic1.jpg
          --server
             -server.js
       -data.json
       -index.html
       -index.js
  </code></pre>