Не загружаются картинки с использованием webpack?

Question

[yarygin2019]

через js создаю html блоки, данные в них берутся из json файла.

function createCards(data) {
    data.forEach(card => {
        const { name, description, category, price, img, size } = card;       
        const cardItem = 
        `
            <div class="menu__card">
        
                    <div class="menu___img-block">
                        <img src="${img}">
                    </div>
                    <div class="menu__card-content">
                        <h3 class="menu__card-header">${name}</h3>
                        <p class="menu__pharagraf">${description}</p>
                        <div class="menu__prise">${price}</div>
                    </div>
            </div>
        `
        cards.insertAdjacentHTML('beforeend',cardItem)
    });
}

часть json файла

{
    "name": "Irish coffee",
    "description": "Fragrant black coffee with Jameson Irish whiskey and whipped milk",
    "price": "7.00",
    "category": "coffee",
    "img": "assets/images/coffee/coffee-1.jpg",
    "sizes": {
      "s": {
        "size": "200 ml",
        "add-price": "0.00"
      },
      "m": {
        "size": "300 ml",
        "add-price": "0.50"
      },
      "l": {
        "size": "400 ml",
        "add-price": "1.00"
      }
    },
    "additives": [
      {
        "name": "Sugar",
        "add-price": "0.50"
      },
      {
        "name": "Cinnamon",
        "add-price": "0.50"
      },
      {
        "name": "Syrup",
        "add-price": "0.50"
      }
    ]
  },

И вот карточки отображаются в изображиния нет. Но если картинки скопировать в dist, то картинки появляются. Автоматически они не появляюся в dist когда создаешь из js разметку.

webpack.config:

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

const mode = process.env.NODE_ENV || 'development';
const devMode = mode === 'development';
const target = devMode ? 'web' : 'browserslist'; 
const devtool = devMode ? 'source-map' : undefined;

module.exports = {
  mode,
  target,
  devtool,
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'), 
    },
    compress: true, 
    port: 8080, 
    open: true, 

  },
  entry: {
    main: ['@babel/polyfill', './coffee-house/src/index.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: '[name].[contenthash].js',
    assetModuleFilename: 'assets/[name][ext]'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: './coffee-house/src/pages/home/index.html',
    }),
    new HtmlWebpackPlugin({
      filename: 'menu.html',
      template: './coffee-house/src/pages/menu/menu.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  module: {   
    rules: [
        {
            test: /\.html$/i,
            loader: "html-loader",
        },
        {
            test: /\.(c|sa|sc)ss$/i,
            use: [
                devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                 "css-loader",
                 {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [require('postcss-preset-env')],
                        }  
                    }
                 },
                 "sass-loader"
            ],
        },
        {
            test:/\.woff2?$/i,
            type: 'asset/resource',
            generator: {
                filename: 'fonts/[name][ext]'
            }
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'assets/images/[name][ext]',
          },
        },
        {
            test: /\.(?:js|mjs|cjs)$/i,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', { targets: "defaults" }]
                ]
              }
            }
        },
        {
          test: /\.json$/,
          type: 'asset/resource',
        },
    ],
  },
};

директория проэкта

Answer 1

[Сергей delphinpro]

Webpack ни при чем
вы берете данные из внешнего источника уже на этапе исполнения, а не сборки.
Будьте любезны в свой json засунуть правильные ссылки на картинки.

Comments

[yarygin2019]

пробовал вставить различные варианты, не помогало, попробую еще

[Сергей delphinpro]

yarygin2019, зачем методом тыка вставлять разные варианты, если можно сразу вставить правильный? Так можно до второго пришествия страдать...

- "img": "assets/images/coffee/coffee-1.jpg",
+ "img": "/assets/images/coffee/coffee-1.jpg",

при условии, что папка assets лежит в корне сайта.

[Сергей delphinpro]

не получится – показывайте как вы используете функцию createCards(data) и как получаете data

[yarygin2019]

Сергей delphinpro, тоже не помогло

[Сергей delphinpro]

yarygin2019, также не лишним будет заглянуть в сеть, и посмотреть реальные адреса запросов к картинкам...

[yarygin2019]

import './pages/home/index.html';
import './pages/menu/menu.html';
import './pages/home/style.scss';
import './pages/menu/menu.scss';
import './scripts/products.json';
import products from './scripts/products.json';


const cards = document.querySelector('.menu__cards-block');
console.log(cards);
const btnShowCards = document.querySelector('.show-cards');
let productData = [];

async function getProducts2() {
    try {
        const response = await fetch('./assets/products.json');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        productData = await response.json();
        console.log(productData);
        renderStartPage(productData); // а тут подключается функция отображения карточек
    }

     catch (error) {
        console.log('Error fetching products:', error);
    }
    console.log(productData);
}

getProducts2();

function renderStartPage(data) {
    console.log(data);
    if (!data || !data.length) {
        showErrorMessage(NO_PRODUCTS_IN_THIS_CATEGORY);
        return
    }

    createCards(data);
}

// А ВОТ УЖЕ РЕНДЕР КАРТОЧКИ

function createCards(data) {
    data.forEach(card => {
        const { name, description, category, price, img, size } = card;       
        const cardItem = 
        `
            <div class="menu__card">
        
                    <div class="menu___img-block">
                        <img src="${img}">
                    </div>
                    <div class="menu__card-content">
                        <h3 class="menu__card-header">${name}</h3>
                        <p class="menu__pharagraf">${description}</p>
                        <div class="menu__prise">${price}</div>
                    </div>
            </div>
        `
        cards.insertAdjacentHTML('beforeend',cardItem)
        if( category == 'coffee') {
        }
    });
}

[Сергей delphinpro]

а, ну понятно. Все лежит в src, webpack не обрабатывает пути из переменных, и в dist/assets/images картинок нужных у вас нет.
Заюзайте copy-webpack-plugin для копирования таких ассетов.

я думал вы аяксом подтягиваете json...

[yarygin2019]

[yarygin2019]

попробую, спасибо. webpack этот ужас какой-то, без него так хорошо все работает.