Разрешение URL-адреса фонового изображения css с помощью Webpack

Question

Я использую webpack и просто пытаюсь применить background-image указано в url свойство к элементу html.

Я посмотрел на несколько потоков (это один , например) , но не нашли то , что работает для меня.

Вот моя установка:

// index.js

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

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

export default MyComponent

// styles.css

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

// webpack.config.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, я вижу, что путь разрешен:

Однако, когда я пытаюсь перейти по этому URL-адресу, все, что я вижу, - это маленький белый квадрат ...

Это определенно не изображение. Я нахожу изображение в моей сборке в ./dist/static/public/images/my-background.jpg

Обратите внимание, что изображение имеет большой размер: 3842×2162

Я думаю, что это связано с конфигурацией загрузчика веб-пакетов, но не совсем нашел, как настроить его, чтобы он работал здесь. Любая помощь будет очень признательна!

Answer 1

Возможно, вы используете новую версию Webpack, где url-loaderа также file-loaderустарели и Asset Modulesявляются альтернативами.

Попробуйте использовать:

      {
      test: /\.(jpg|png|svg|gif)$/,
      type: 'asset/resource',
},

вместо.

Для получения дополнительной информации щелкните здесь.

Answer 2

У меня была такая же проблема, и она, наконец, сработала, используя~для ссылки на каталог проекта и доступаpublicпапка оттуда.

      background-image: url("~/public/images/person.png");

А у меня это работает нормально :)

ИЛИ И другой альтернативой было бы переместить ваши изображения вsrcкаталог, webpack упакует их в папку с именемstatic/mediaкак статические файлы

Answer 3

Я только что обновился с webpack v4 до v5, и, согласно документам webpack по управлению активами для изображений , мне нужно было убедиться, что изображения в файлах css на самом деле в настоящее время расположены там, где я говорил, а не там, где они будут.

Итак, переход от:

      ...
background: url(/static/images/header.jpg)
...

к:

      ...
background: url(/images/header.jpg)
...

везде исправили эту проблему для меня.

Answer 4

Решение (используя версию веб-пакета до 5.0) состоит в том, чтобы отключитьcss-loaderсинтаксический анализ URL-адреса, поскольку файл CSS не обновляет строку URL-адреса при сборке веб-пакета

      module.exports = { 
      ...
     module: {
        rules: [ 
            { //https://webpack.js.org/loaders/css-loader/
                test: /\.css$/, 
                use: ["style-loader"]
            },

            { //https://webpack.js.org/loaders/css-loader/
                test: /\.css$/, 
                loader: "css-loader",
                options: {
                    url: false,
                }
            }
        ]
    }

}

Обратите внимание, что это приведет к тому, что файлы, используемые в .css, не будут хэшироваться и будут структурированы как исходная папка /public/ при сборке проекта в папку /dist/. Вот что заставляет это работать.

Для справки см. этот выпуск github и этот

Кроме того, я использую:

• "css-загрузчик": "^6.7.2",
• "загрузчик файлов": "^6.2.0",
• "html-webpack-plugin": "^5.5.0",
• "стиль-загрузчик": "^3.3.1",
• "url-загрузчик": "^4.1.1",
• "веб-пакет-cli": "^4.10.0",
• "webpack-dev-сервер": "^4.11.1"

Обновление: наличие объекта правила, использующего «url-loader», может переопределить файлы из других правил. Итак, в этом случае вы должны удалить его и иметь параметры в «css-loader» следующим образом:

      { 
    test: /\.css$/, 
    loader: "css-loader",
    options: {
        url: true,
        esModule: false
    }
}

Попробуйте закомментировать каждый параметр и правило и посмотреть результаты, чтобы проверить, что делает каждый параметр и правило. Удаляйте папку .dist/ перед каждой сборкой (поскольку она не очищается автоматически после каждой сборки), чтобы убедиться, что вы знаете, какие файлы создаются и когда.