title: React import images from public folder
body: <p>I'm trying to get static images fro my public directory but is not being found. I'm not using CRA, so maybe is some configuration with Webpack that I'm missing. Using file-loader module and importing the image works on Dev Mode, but doesn't work in for my production server specification</p>
  
  <p>My Project structure:</p>
  
  <pre><code>\public
     \static
        \images
           image.png
  \src
     \component
        component.js
  ...
  package.json
  webpack.common.js
  webpack.dev.js
  webpack.prod.js
  </code></pre>
  
  <p>On component.js, I want to get image.jpg on static/images folder like this:</p>
  
  <pre><code>  &lt;img src='/static/images/image.png'&gt;&lt;/img&gt;
  </code></pre>
  
  <p>But I'm getting a 404 not found.</p>
  
  <p>My webpack.commom.js:</p>
  
  <pre><code>const CleanWebPackPlugin = require('clean-webpack-plugin')
  const HtmlWebPackPlugin = require('html-webpack-plugin')
  const path = require('path')
  
  module.exports = {
      entry: {
          main: './src/index.js'
      },
      output: {
          filename: '[name].[hash].js',
          path: path.resolve('./dist'),
          publicPath: "/"
      },
      module:{
          rules:[
              {
                  test: /\.js$/,
                  exclude: ['/node_modules'],
                  use: [{ loader: 'babel-loader'}],
              },
              {
                  test: /\.s?(a|c)ss$/,
                  use: [{
                      loader: 'style-loader'
                  }, {
                      loader: 'css-loader'
                  },{
                      loader: 'sass-loader'
                  }]
              },
              {
                  test: /\.(png|jpe?g|gif)$/,
                  use: [
                    {
                      loader: 'file-loader',
                      options: {},
                    },
                  ],
                },
  
          ]
      },
      plugins: [
          new HtmlWebPackPlugin({
              template: 'index.html'
          }),
          new CleanWebPackPlugin(),
      ],
  }
  </code></pre>
  
  <p>And the Dev version:</p>
  
  <pre><code>module.exports = merge(common, {
      mode: 'development',
      devServer: {
          host: 'localhost',
          port: 3000,
          open: true,
          historyApiFallback: true,
          publicPath: "/",
      }
  })
  </code></pre>
  
  <p>Thank you in advance.</p>