Resolve Webpack "The image cannot be displayed because it contains errors." + File Loader Issue

Question

I want to use an image in a scss file as a background image. I'm using webpack@5.76.2

---

My question: how do I resolve the following error that results when referencing images through scss files using Webpack:

"The image “{PATH}” cannot be displayed because it contains errors."

---

My directory structure is like:

• /assets/index.js
• /assets/webpack.config.js
• /assets/src/images/derp.png
• /assets/src/scss/
• /assets/src/scss/index.scss
• /assets/dist/images/

I've checked all of my file permissions and can open all of the image assets via the file:// protocol in my browser without issue.

For the purposes of example, my index.js file contains this

import './scss/index.scss';

For the purposes of example, my index.scss file contains this

.derp {
    background-image:url('../images/derp.png');
    background-repeat:no-repeat;
    background-position:center;
    background-color:red !important;
}

When compiled by webpack, my css is:

.derp {
  background-image: url(6a21cd8ac5284da706ed.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: red !important;
}

When I inspect the element, I see the assets/dist/6a21cd8ac5284da706ed.png path, go to it, & see the following error:

The image “https://derp.com/assets/dist/6a21cd8ac5284da706ed.png” cannot be displayed because it contains errors.

For the purposes of example, webpack config is:

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  mode: 'development',
  output: {
    filename: '[name].compiled.js',
    path: __dirname + '/dist'
  },
  resolve: {
    symlinks: true,
  },
  module: {
    rules: [
      // Styles
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {  sourceMap: true },
          },
          {
            loader: 'resolve-url-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        test: /font-awesome\.config\.js/,
        use: [
          { loader: 'style-loader' },
          { loader: 'font-awesome-loader' }
        ]
      },
      // Fonts > Load font files and save them in a 'fonts' directory.
      {
        test: /\.(ttf|eot|woff|woff2|otf)$/,
        exclude: /fontawesome-webfont\.(ttf|eot|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          },
        },
      },
      // Images > Load image files and save them in an 'img' directory.
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: {
          // loader: 'url-loader', // have tried this, too
          loader: 'file-loader',
          options: {
            //limit: 8192, // inline images up to 8KB
            name: 'images/[name].[ext]',
          },
        },
      },
      
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].compiled.css',
      chunkFilename: '[id].css',
    }),
  ],
};