Nasdanika Vinci предоставляет пользователю возможность вставить изображение на сайт несколькими способами.

1. Традиционный способ: тем или иным способом указать путь к изображению, которое должно быть встроено в сайт.
2. Не очень традиционный способ: хранить изображение непосредственно в коде проекта.

Традиционный способ заключается в том, что мы говорим браузеру: “пойди туда где лежит картинка и покажи ее пользователю”. Путь к изображению указывается в теге <img>.

Рассмотрим структуру этого тега:

1. Мы видим, что весь тег заключен в угловые скобки (знаки меньше/больше)
2. После открывающей угловой скобки написан тег, а после пробела написан самый главный атрибут этого тега - src=. С помощью этого атрибута указывается путь к файлу изображения. Сам путь к файлу заключен в кавычки.
3. Затем мы видим атрибут alt - Для ввода альтернативного текста. И атрибут Title - для ввода всплывающей подсказки.

У тега img могут быть и другие атрибуты, например, задающие ширину и высоту изображения, но через маркдаун синтаксис мы их задать не можем.

Таким образом, для правильного формирования тега <img> нам ужно знать путь по которому отправить браузер за картинкой.

Путь может быть абсолютный и относительный. Абсолютный путь похож на точный адрес: планета Земля, Советский Союз, 3-я улица Строителей, дом 25, квартира 12.

Относительный - на маршрут из одного места в другое: от этого дома поверни направо, пройди три дома и поверни налево. Через 100 метров будет дом с номером 25, а в нём - квартира 12. Относительный путь строится от той страницы, в которую встраивается изображение.

Абсолютный путь можно использовать, если вы хотите встроить картинку, которая хранится где-нибудь в интернете. В этом случае путь к изображению будет иметь вид:

https://images.pexels.com/photos/4507967/pexels-photo-4507967.jpeg

Если же вы хотите встроить в сайт собственные изображения, то вам необходимо использовать относительный путь к той папке проекта, в которой будут храниться файлы картинок.

./img/GoldMedal.jpg

Следовательно, нам необходимо создать в проекте специальную папку для хранения изображений и узнать: где можно подсмотреть путь к файлу.