Почему не работает src?

Question

[CAMOBAP4UK]

Доброго дня. Почему не работает src ? Хочу фоновую картинку прописать как часть фона , что бы не плодить лишние секции. Если делать через css то работает (если убрать комментирование) , а если в html коде то нет

.Main__image{
  position: absolute;
  display: flex;
width: 487px;
height: 165px;
bottom: 0px;
left:0px ;/*
background-image: url(../images/main.png);*/
background-size: contain;
background-position: left;
background-repeat: no-repeat;
z-index: 0;
}

<section class="main">
        <h2 class="main__menu">Что то важное</h2>
        <p class="main__subtitle">что то важное </p>
        <div class="main__image">
            <img alt="Важная картинка " src="../images/main.png">
          </div>
          <a href="#" class="main__link">Подробнее</a> 
      </section>

Comments

[Пашенька]

Потому что неверный путь к картинке в html.

[CAMOBAP4UK]

Пашенька, К сожалению , я пока что знаю как задавать пусть только в css.Как мне перезадать тогда этот путь для картинки ?( и почему тогда в css работает ?)

[Пашенька]

CAMOBAP4UK, потому что это относительный путь. Относительно директории, где лежит css файл он верен, а относительно директории, где лежит html файл - он неверен. В html будет такой images/main.png. Исправляйте.

[CAMOBAP4UK]

Да , заработало. А как мне теперь сделать что бы эта картинка наследовала свойства из Main__image ?

[CAMOBAP4UK]

Пашенька, Разобрался сам , спасибо

Answer 1

[Даниил Сухих]

<section class="main">
        <h2 class="main__menu">Что то важное</h2>
        <p class="main__subtitle">что то важное </p>
        <div class="main__image">
            <img alt="Важная картинка " src="images/main.png">
          </div>
          <a href="#" class="main__link">Подробнее</a> 
      </section>

Comments

[CAMOBAP4UK]

Да , заработало. А как мне теперь сделать что бы эта картинка наследовала свойства из Main__image ?

[CAMOBAP4UK]

Разобрался сам , благодарю

Answer 2

[Меля Крупников]

Для начала, опишите структуру вашего проекта. Скорее всего, относительно вашего файла стилей (css) картинка лежит уровнем ниже, нежели файл разметки (html), отсюда и вытекает отсутствие необходимости использовать "../" в пути. Почитайте про абсолютные и относительные пути, в интернете полно статей на эту тему, это поможет вам разобраться.

Comments

[CAMOBAP4UK]

Да , спасибо. Вот это точно нужно прочитать