Задать вопрос
@kirillleogky

Какой путь для изображений правильный?

У меня следующая структура:
5e15a045ace08797459024.png
Мой исходный html - dist/landing/index.html:
<div class="header_block-logo">
                <div class="header_block-logo_text">Simple</div>
                <img src="../../src/img/logo_piskel.png" alt="Logo Piskel" class="header_block-logo_icon">
            </div>


вебпак конфиг:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/screens/app/index.js',
    landing: './src/screens/landing/index.js'
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name]/main.js"
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
    },
    {
      test: /\.scss$/,
      use: [{
          loader: "style-loader"
      }, {
          loader: "css-loader"
      }, {
          loader: "sass-loader",
      }]
    },
    {
      test: /\.(jpg|png|svg|ttf|woff|eot)$/,
      loader: 'url-loader',
      options: {
       name: 'img/[name].[ext]',
      },
    }
  ],
 },
  plugins: [
   new HtmlWebpackPlugin({
     inject: true,
     chunks: ['app'],
     template: 'src/screens/app/app.html',
     filename: 'app/index.html'
   }),
   new HtmlWebpackPlugin({
     inject: true,
     chunks: ['landing'],
     template: 'src/screens/landing/landing.html',
     filename: 'landing/index.html'
   })
 ]
};



Загруженный проект - odd-frogs.surge.sh


При задании путей начинающейся с ../../src/ ничего не работает
Подскажите какие правильные пути для изображений нужно указать?
  • Вопрос задан
  • 1507 просмотров
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 2
mahmudchon
@mahmudchon
Правильный тот путь, по которому изображение по итогу доступно.
Вы указываете относительные пути, относительные расположению в файловой системе. Но, на сайте у Вас корневая папка получается landing и все что рядом с ней или просто "не в ней" - на сайте будет недоступно.
Ответ написан
@3vgeny90
Папку img в папку landing
<img src="img/logo_piskel.png" alt="Logo Piskel" class="header_block-logo_icon">
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы