Webpack won't load background-image into html file

Question

I'm trying to set a background image via scss, bundle via webpack, and open the html file in the browser. Other background attributes work, but when loading the image I get GET file://wsl%24/c76193e7a53ed91f170bfaedb61a2832.png net::ERR_FILE_NOT_FOUND in the console. I feel like something is up with the way I have my styles organized? Webpack finds and apparently builds the image according to the terminal, but something happens on the way to the browser. Any help would be appreciated. I'm running WSL2 with an Ubuntu 20.04 distro, the project is within the distro's file tree.

// my-project/src/style.scss

.page-head {
    display: flex;
    align-items: flex-end;
    // background:
    //  linear-gradient(
    //      64.12deg,
    //      rgba(51, 51, 51, 0.8) 34.6%,
    //      rgba(255, 255, 255, 0) 100%
    //  );
    background-image: url(./images/stagetimebanner.png);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
    color: white;
    font-weight: 300;
    height: 50vh; 

// my-project/src/index.js

import "./style.scss";
require.context("./images", true);

// my-project/webpack.config.js

const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    watch: true,
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "resolve-url-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: "file-loader",
                    },
                ],
            },
        ],
    },
    plugins: [new BundleAnalyzerPlugin()],
    devServer: {
        contentBase: path.join(__dirname, "public"),
        port: 9000,
    },
};

Answer 1

I think you are using webpack 5, therefore you don't need to use loaders like "url-loader" or "file-loader" any more. Read about assets modules . And your problem should be solved by the code below.

css

.page-head {
  background-image: url(./images/stagetimebanner.png);
}

webpack.config.js

rules: [
  {
    test: /\.(png|jpe?g|gif)$/i,
    type: 'asset/resource',
      generator: {
        // adding a hash to the file
        filename: 'images/static/[name].[hash][ext]',
      },
  },
]

PS. Take a look at my webpack-boilerplate maybe some of the code will be useful to you.

Answer 2

Can you try with url-loader , it works for me fine.

{
    test: /\.(png|eot|otf|ttf|woff|woff2|svg)$/,
    use: [ 
          { 
              loader: 'url-loader' 
          } 
         ]
};