Webpack - 动态插入路径

Question

我正在尝试动态地将内嵌的背景图像网址添加到DOM元素中。问题是当插入DOM时，图像名称不会被散列，因此与目标图像名称不匹配。

例如，这是我正在尝试使用的对象：

var project = {
        title: "Foobar",
        image: "../img/foobar.jpg"
    };

以下是javascript在DOM中创建的内容：

<div style="background-image: url(../img/foobar.jpg)"></div>

......当我真的需要这样的东西时：

<div style="background-image: url(2faf750010d2109a74e1ce1d02.jpg)"></div>

这是我的webpack.config.js

const path = require("path");

let config = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./app"),
        filename: "./bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
              test: /\.s?css$/,
              use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
              ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                loader: 'file-loader'
            }
        ]
    }
}

module.exports = config;

如果我只是使用JavaScript添加类名并使用CSS管理背景图像，它实际上是有效的，因为CSS路径被正确地散列，但目前我不需要：/

感谢您的帮助！