为什么我的Webpack不加载背景图像？

Question

我对webpack还是很陌生，但是在响应时css-loader或file-loader有一些问题

我正在尝试加载背景图像，但是效果不佳。即使devtools显示背景图像样式，也不会显示背景图像。

我正在尝试通过React中的CSS文件加载此背景图片：   背景：url（'../../ assets / img / 1017.jpg'）无重复权限；

这是我的Web Pack配置：

[![const path = require("path");

module.exports =
{
    mode: "development",
    entry: path.resolve(__dirname,`src`, `app`),
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        publicPath:'/'
    },
    resolve: {
        extensions: \['.js','.jsx'\]
    },
    devServer:{
        historyApiFallback: true
    },
    module: {
        rules:\[{
            test: /\.jsx?/,
            loader:'babel-loader',
            exclude: '/node_modules'
        },
        {
            test: /\.(jpg|png)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 25000,
              },
            },
          },

          {
            test: /\.(jpg|png)$/,
            use: {
              loader: "file-loader",
              options: {
                name: "\[path\]\[name\].\[hash\].\[ext\]",
              },
            },
          },
        {
            test:/\.css$/,
            use:\['style-loader','css-loader',\]
        },
       \]
    },

}

Answer 1

您在背景图像属性中添加了不重复和居中值，而可以使用背景属性。

Answer 2

您在css规则中犯了错误

您已将background-image与no-repeat和center一起使用。 background-image仅接受url(...)。了解更多here

如何修复

只需将background-image替换为background

.loginLeft{
    background: url(data:image/...) no-repeat center
}