title: Webpack url-loader or file-loader not working react app
body: <p>Images are not loading in the browser using Webpack 4 with either of url-loader, or file-loader. Small images are not in data url(or if they are the browser isn't showing them) and file network requests are not being made with file loader.</p>
  
  <p>Nginx is serving the images properly at <code>https://{server}/images/image_name.png</code>, but not <code>https://{server}</code> and no network calls for images are being made in web inspector network panel.</p>
  
  <p>Best guess so far is Webpack url-loader or file-loader must not be generating the right URL. Cannot find the host when searching app.bundle.js for the url. I've tried for days every combination of <code>publicPath</code>, <code>outputPath</code>, etc.. from all the other stackoverflow posts, nothing works.</p>
  
  <p>Is there any way to view the url's that webpack generates besides searching the js? Is the webpack config not proper? Troubleshooting advice?</p>
  
  <p>Here is how I handle images in code:</p>
  
  <pre><code>import nav_logo from "Images/white_nav_logo.svg";
  
  &lt;img src={nav_logo} /&gt;
  </code></pre>
  
  <p>Here is my webpack.common.js:</p>
  
  <pre><code>module.exports = {
    mode: mode,
    entry: {
      app: ["./src/js/app.js"]
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: '[name].bundle.js',
      publicPath: '/',
      chunkFilename: '[name].bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(sc|c|)ss$/,
          issuer: {
            exclude: /\.less$/,
          },
          use: [
            {
              loader:  'style-loader',
              options: {
              },
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                localIdentName: '[name]-[local]-[hash:base64:5]',
              },
            },
          ],
        },
  
        {
          test: /\.less$/,
          use: [
            {
              loader:  'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
              },
            },
          ],
        },
        {
          test: /\.(jsx?)/,
          exclude: ["/node_modules", "/src/js/elm"],
          use: [
            { loader: "babel-loader?cacheDirectory=true",
            }
          ]
        },
        {
          test: /\.scss$/,
          issuer: /\.less$/,
          use: {
            loader: './src/js/sassVarsToLess.js'
          }
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'images/[name].[ext]',
              }
            },
            {
              loader: "image-webpack-loader",
              options: {
                disable: true,
                mozjpeg: {
                 progressive: true,
                 quality: 65
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                 enabled: true,
                },
                pngquant: {
                 quality: '65-90',
                 speed: 4
                },
                gifsicle: {
                 interlaced: false,
                },
                // the webp option will enable WEBP
                webp: {
                 quality: 75
                }
              }
            },
          ],
        },
        {
          test: /\.(ttf|otf|eot|woff2?)$/,
          loader: "file-loader",
          options: {
            name: 'fonts/[name].[ext]',
          }
        }
      ],
      noParse: [/\.elm$/]
    },
    node: {
      fs: 'empty'
    },
    plugins: [
      new Dotenv(),
      new CopyWebpackPlugin([{
        from: "./src/assets/css",
        to: "css"
      },
    ]),
    ]
  };
  </code></pre>
  
  <p>and webpack.prod.js</p>
  
  <pre><code>module.exports = merge(common, {
    mode: 'production',
    module: {
      rules: [
        {
          test: /\.(sc|c|)ss$/,
          issuer: {
            exclude: /\.less$/,
          },
          use: [
            {
              loader:  MiniCssExtractPlugin.loader,
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                localIdentName: '[name]-[local]-[hash:base64:5]',
              },
            },
          ],
        },
        {
          test: /\.less$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
              }
            },
          ],
        },
        {
          test: /\.(jsx?)/,
          exclude: ["/node_modules", "/src/js/elm"],
          use: [
            { loader: "babel-loader?cacheDirectory=true",
            }
          ]
        },
        {
          test: /\.scss$/,
          issuer: /\.less$/,
          use: {
            loader: './src/js/sassVarsToLess.js' // Change path if necessary
          }
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'images/[name]-[hash:8].[ext]'
              }
            },
            {
              loader: "image-webpack-loader",
              options: {
                disable: false,
                mozjpeg: {
                 progressive: true,
                 quality: 65
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                 enabled: true,
                },
                pngquant: {
                 quality: '65-90',
                 speed: 4
                },
                gifsicle: {
                 interlaced: false,
                },
                // the webp option will enable WEBP
                webp: {
                 quality: 75
                }
              }
            },
          ],
        },
        {
          test: /\.(ttf|otf|eot|woff2?)$/,
          loader: "file-loader",
          options: {
            name: 'fonts/[name].[ext]',
          }
        }
      ],
      noParse: [/\.elm$/]
    },
    optimization: {
      minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin({})]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/assets/prod.index.html'
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
    ],
  })
  </code></pre>
  
  <p>and here is nginx default.conf</p>
  
  <pre><code>server {
      listen       80;
      server_name  &lt;domain_name&gt;;
      root /usr/share/nginx/html;
      access_log  /var/log/nginx/host.access.log  main;
  
      index index.html;
  
      location / {
        try_files $uri $uri/ =404;
      }
  
      location /images/ {
        alias /usr/share/nginx/html/images/;
        try_files $uri $uri/ =404;
        error_log /var/log/nginx/error.log debug;
      }
  
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   /usr/share/nginx/html;
      }
  }
  </code></pre>