Почему мой веб-пакет не загружает фоновое изображение?

Question

Я довольно новичок в вебпаке, но у меня есть некоторые проблемы с css-loader или file-loader в реакции

Я пытаюсь загрузить фоновое изображение, но оно работает не совсем правильно. Фоновое изображение не отображается, хотя devtools отображают стиль фонового изображения.

Я пытаюсь загрузить это фоновое изображение через css-файл в React: фон: url ('../../ assets / img / 1017.jpg') без права повтора;

вот мой конфиг веб-пакета:

[![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

вы добавили без повторов и center значение в background-image свойство, вместо этого вы можете использовать background свойство.

Answer 2

Вы допустили ошибку в правиле CSS

Вы использовали background-image с no-repeat и center.background-image принимает только url(...).Подробнее здесь

Как исправить

Просто замените background-image на background

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