@yarygin2019

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

через 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',
        },
    ],
  },
};


директория проэкта
664f07664a8df531732939.png
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Webpack ни при чем
вы берете данные из внешнего источника уже на этапе исполнения, а не сборки.
Будьте любезны в свой json засунуть правильные ссылки на картинки.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы