При сборке webpack картинки из css не открываются?

Question

[D1ma5ta]

webСобираю проект webpackом, Есть кнопка и у нее с помощью background-image добавлена картинка.
При сборке проекта, картинки попадают в папку, но с измененным названием (я так понял что это нормально). Но на странице картинка не отображается, и даже если я пытаюсь просто открыть эту картинку на ПК, то выдает ошибку.
webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "src", "index.js"),
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "js/[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "images",
        },
      },
      {
        test: /\.(wav|mp3)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "sounds",
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.webmanifest$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "",
            },
          },
        ],
      },
    ],
  },
  devServer: {
    open: true,
    compress: true,
    port: 8080,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
      files: {
        manifest: "./manifest.webmanifest",
      },
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
      chunkFilename: "css/[name].[contenthash:8].css",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "manifest.webmanifest"),
          to: path.resolve(__dirname, "build", ""),
        },
      ],
    }),
  ],
};

путь в style.css выглядит так:

.swap-theme-button {
  background-image: url(../images/sun.png);
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

В собранном файле путь выглядит так:

.swap-theme-button {
  background-image: url(../a84fda19573ee233bb14.png);
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Answer 1

[Евгений Косухин]

А если в CSS использовать алиас @

Наверное у вас картинки в src лежат
background-image: url(@/images/sun.png);

А если у вас не в src картинки то добавить алиас пути к директрии с картинками
в webpack.config.js по пути resolve.alias добавить еще алиас пути для картинок

Comments

[D1ma5ta]

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

[Евгений Косухин]

D1ma5ta, Покажите что в браузере в девтулз, на вкладке Network должны быть ошибки по этим .png картикам

[Евгений Косухин]

По моему вскод просто так картинки не отображает на просмотр без плагинов, посмотрите лучше в файловом проводнике ОС открываются картинки или нет, есть там данные в файлах после сборки

[szQocks]

D1ma5ta, путь не верный в собранном файле образуется

говорил же добавить publicPath: '/'

[D1ma5ta]

Евгений Косухин, В Network пусто. Вообще пути правильно отображается. Наверное сама картинка неправильно билдится.
Другие картинки я могу посмотреть через vscode, а именно которые через css добавлены, нет.

[szQocks]

D1ma5ta, и зачем тебе file-loader, в webpack 5, там же нормально всё можно настроить

publicPath: "/",
      assetModuleFilename: "assets/[name]-[contenthash][ext]",

{
          test: /\.(png|jpg|jpeg|gif|woff2|mp3)$/i,
          type: "asset/resource",
        }

[D1ma5ta]

Добавил в output: assetModuleFilename: "assets/[name]-[contenthash][ext]", и указал type: "asset/resource",
Все заработало, спасибо)

[szQocks]

D1ma5ta, картинки которые юзаются в js файлах, их явно нужно импортировать как и mp3

картинки которые будут вставляться в index.html прямо в файле если, типа через тег img - то там их нужно вставлять через специальный синтаксис импорта который у HtmlWebpackPlugin

[D1ma5ta]

szQocks, С js разаобрался, а с html не совсем.
Вот так должно быть или есть более простой вариант?

new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
      // Передача путей к изображениям для вставки в HTML
      images: {
        logo: path.resolve(__dirname, "src", "assets", "logo.png"),
        banner: path.resolve(__dirname, "src", "assets", "banner.jpg"),
      },
    }),

<body>
  <img src="<%= htmlWebpackPlugin.options.images.logo %>" alt="Logo">
  <img src="<%= htmlWebpackPlugin.options.images.banner %>" alt="Banner">
</body>

[szQocks]

D1ma5ta,

new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),

<img src="<%=require('./assets/images/logo.png')%>" alt="">

путь - './assets/images/logo.png' это не путь уже типа в собранном проекте, а в режиме разработки

[D1ma5ta]

szQocks, Спасибо огромное! Получилось собрать весь проект))

[VAlov223]

szQocks, у меня была схожая проблема с автором вопроса. По какой-то причине стандартный file-loader не резрешал url-пути в css. При использовании assetModule картинки начали загружаться. Спасибо