我正在使用webpack，只是尝试将url属性中指定的background-image应用于html元素。
我已经查看了几个线程（例如this one），但没有找到适合我的线程。
我的设置如下：
//索引. js

import React from 'react'
import styles from './styles.css'

const MyComponent = () => {
  return (
    <div className={styles.container}></div>
  )
}

export default MyComponent

//样式. css

.container {
  background-image: url('../../../static/public/images/my-background.jpg');
}

//网页包配置. js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.bundle.js"
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: { 
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  devServer: {
    static: path.join(__dirname, 'src')
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname, "src", "index.html"),
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'static',
          to: 'static'
        }
      ]
    })
  ],
  module: {
    rules: [
        { 
            test: /\.(js|jsx)$/, 
            exclude: /node_modules/, 
            use: ["babel-loader"] 
        },
        {
            test: /\.(css)$/,
            use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(jpg|png|svg|gif)$/,
          use: ['url-loader', 'file-loader'],
        },
    ],
},
}

当到达localhost时，我确实看到正在解析的路径：

然而，当我试图到达那个网址时，我看到的只是一个白色的小方块...

这绝对不是图像。我确实发现图像存在于我的构建./dist/static/public/images/my-background.jpg中
请注意，该图像的尺寸较大：小行星3842  
我认为这与webpack加载程序的配置有关，但没有找到如何调整它来让它在这里工作。任何帮助都将非常感谢！