title: webpack file-loader does not load background image
body: <p>I've been having this problem for a while and I see that other people have it too, but even though I have the same code as them it is still not working and I don't know what I'm doing wrong.
  I'm working with react, webpack, babel and scss for a project. At first I create a main component which has a background image tha loaded without problems, but when I added a carousel component I had an error that said that I needed a loader for the images to appear (html images, not bakground). So I looked it up  on the internet and  two loaders appeared: url-loader and file-loader, I installed both and added one in my webpack config file as it was said in the documentation. The images loaded, but the background image of the main component didn't, and not only that, all the styles for the background didn't apply either.</p>
  <p>This is my webpack config file, I tried putting both loaders, then only one, then the other, but none of them worked. I tried every solution tha came across stackoverflow but the code isn't working and there is no errors in my terminal.</p>
  <p>///////EDIT</p>
  <p>I added absolute paht but it's still not working. The image gets fetched because I'd get an error if it isn't so I don't think this is a path issue.
  I updated the webpack config file</p>
  <pre><code>const HtmlWebPackPlugin = require(&quot;html-webpack-plugin&quot;);
  const path = require(&quot;path&quot;);
  const htmlPlugin = new HtmlWebPackPlugin({
   template: &quot;./src/index.html&quot;,
   filename: &quot;./index.html&quot;
  });
  
  
  
  
  module.exports = {
  mode: &quot;development&quot;,
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'src/assets/')
    }
  },
    module: {
      rules: [{
     test: /\.js$/,
     exclude: /node_modules/,
     use: {
       loader: &quot;babel-loader&quot;
     }
   },
    {
     test: /\.s?css$/,
     use: [&quot;style-loader&quot;, &quot;css-loader&quot;, &quot;sass-loader&quot;]
    },
    {
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            esModule: false
          },
        },
      ]
    }
  ]},
   plugins: [htmlPlugin],
   devServer:{
     historyApiFallback : true
   }
  }
  </code></pre>
  <p>And this is my main component and its scss file (where the bakground image lies)</p>
  <p>React component</p>
  <pre><code>import React from &quot;react&quot;;
  import { NavBar } from &quot;../components/NavBar&quot;;
  import CarouselComponent from &quot;../components/Carousel&quot;;
  
  export const MainPage = () =&gt; {
      return (
          &lt;div&gt;
          &lt;NavBar /&gt;
          &lt;div&gt;
              &lt;div className=&quot;main&quot;&gt;
                  &lt;h1&gt;Find a new musical to watch!&lt;/h1&gt;
                  &lt;a className=&quot;main__btn&quot; href=&quot;/musicals&quot;&gt;See categories&lt;/a&gt;
              &lt;/div&gt;
              &lt;div className=&quot;login-info&quot;&gt;
                  &lt;h2 className= &quot;login-info__login&quot;&gt;See our forum for reacomendations and post your own!&lt;/h2&gt;
                  &lt;div className=&quot;login-info__btn-login-position&quot;&gt;
                      &lt;a className=&quot;btn login-btn-position-config&quot; href=&quot;#&quot;&gt;&lt;strong&gt;Loging&lt;/strong&gt;&lt;/a&gt;   
                  &lt;/div&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;h2 className= &quot;login-info__create-account&quot;&gt;Don't have an account? Create one!&lt;/h2&gt;
                  &lt;div className=&quot;login-info__btn-create-position&quot;&gt;
                  &lt;   a className=&quot;btn login-btn-position-config&quot; href=&quot;#&quot;&gt;&lt;strong&gt;Create account&lt;/strong&gt;&lt;/a&gt; 
                  &lt;/div&gt;
             &lt;/div&gt;
              &lt;CarouselComponent /&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Scss component</p>
  <pre><code>body{ 
      padding: 56px 50px 0 50px;
      background-color: $color-background;
  }
  
  
  .main{
      font-family: $primary-title-font;
      height: 90%;
      background: url(Assets/main_background.jpg) no-repeat center center; 
      -webkit-background-size: cover; 
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      
      h1{
          background-image: linear-gradient(90deg, rgba(1,50,1,1) 5%, rgba(70,82,25,1) 51%, rgba(78,82,29,1) 87%);
          background-size: 100%; 
          background-clip: text;
          -webkit-background-clip: text;
          -moz-background-clip: text;
          -webkit-text-fill-color: transparent; 
          -moz-text-fill-color: transparent;
          position: absolute;
          top: 15rem;
          left: 5rem;
          font-size: 5rem;
          
      }
  
      &amp;__btn{ 
          position: absolute; 
          top: 350px;
          left: 459px;
          border-radius: 10% / 20%;
          padding: 1rem;
          text-decoration: none;
          color: $primary-black-color;
          background: $golden-button;
          font-size: 1.5rem;
  
          &amp;:hover{
              color: $primary-black-color;
          }
  
          &amp;:active{
              transform: translateY(2px);
          }
      }
  }
  
  
  </code></pre>
  <p>And this is the carousel component with its scss</p>
  <p>React component</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import &quot;react-responsive-carousel/lib/styles/carousel.min.css&quot;; 
  import { Carousel } from 'react-responsive-carousel';
  import hamilton from &quot;../assets/hamilton.jpg&quot;;
  import six from &quot;../assets/six_the_musical.jpg&quot;;
  import hadestown from &quot;../assets/hadestown.jpg&quot;;
  import theGuy from &quot;../assets/the_guy_who_didnt_like_musicals.png&quot;;
  
  class CarouselComponent extends Component {
      render (){
          return (
              &lt;Carousel autoPlay = {true} infiniteLoop={true} interval={4000} showStatus={false} useKeyboardArrows={true} showThumbs={false}&gt;
                  &lt;div className=&quot;carousel__box-1&quot;&gt;
                      &lt;img src={hamilton} alt=&quot;Hamilton wallpaper&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;carousel__box-2&quot;&gt;
                      &lt;img src={six} alt=&quot;Six wallpaper&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;carousel__box-3&quot;&gt;
                      &lt;img src={hadestown} alt=&quot;Hadestown wallpaper&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;carousel__box-4&quot;&gt;
                      &lt;img src={theGuy} alt=&quot;The guy who didnt like musicals wallpaper&quot;/&gt;
                  &lt;/div&gt;
              &lt;/Carousel&gt;
          )
      }
  }
  
  export default CarouselComponent;
  </code></pre>
  <p>Scss component</p>
  <pre><code>.carousel__box{
      height: 9rem;
  
      img{
          min-width: 100%;
          min-height: 100%;
      }
  }
  
  </code></pre>
  <p>I'll also add my folder structure in case it's necessary</p>
  <pre><code>/project
    /dist
    /node_modules
    /src
      /assets
         (all the images are stored here)
      /components
         card.js
         cardBlock.js
         carousel.js
         navbar.js
      /pages
         main.js
         musicals.js
         notFound.js
      /sass
         (all scss are stored here, there is a styles.scss that imports the rest of files and it's 
         called in index.js)
      index.html
      index.js (imports all react component an renders them in index.html)
      .babelrc
      packaje.json
      packaje-lock.json
      webpack.config.js
  
  </code></pre>
  <p>////// NEW EDIT</p>
  <p>I found that if you put <code>esModule: false</code> inside the url-loader options the image gets loaded.</p>