Вы видели какие-нибудь сайты без изображений? Да, может нам и попадутся несколько, но в наши дни это редкость. Давайте узнаем, как можно добавлять изображения в HTML-документы.

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

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

HTML тег <img>

Вы можете включить изображение в HTML с помощью HTML-тега <img>.

<img <src="flowers.jpg" alt="A Flower Bouquet"/>

Тег <img> загружает изображение и помещает его на веб-страницу. У него есть 2 важных атрибута:

  • src - указывает исходное расположение, в котором браузер будет искать файл изображения. Получив файл изображения, он загружает изображение на веб-страницу. Мы можем использовать URL-адрес (унифицированный указатель ресурсов) для отображения изображения с другого веб-сайта.
  • alt - задает текст, который нам нужно отобразить, если изображение недоступно или если система не может загрузить изображение. Этот текст также помогает посетителям с ограниченными возможностями, использующих программу чтения с экрана.

Как установить источник изображения в HTML

Давайте узнаем немного больше о том, как указать источник изображения.

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

<img src="flowers.jpg" alt="A Flower Bouquet"/>

Браузер будет искать изображение в той же папке, в которую вы поместили HTML-документ.

Если изображение находится в папке или подкаталоге, вам также необходимо включить его в источник.

<img src="/images/flowers.jpg" alt="A Flower Bouquet"/>

После того, как вы добавили строку /images к источнику, браузер будет искать в нем изображение flowers.jpg вместо текущего каталога.

Как добавить изображение в HTML из удаленного места

Изображения, которые вы используете на своих HTML-страницах, не обязательно должны располагаться рядом с ними. Вы можете легко добавлять изображения из удаленных мест (с других веб-сайтов или файловых хранилищ) с помощью URL-адреса.

<img src="https://learn.coderslang.com/js-test-8.png" alt="JavaScript test"/>

Как использовать “.” или “..” в качестве источника изображения в HTML

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

<img src= "./flowers.jpg" alt="A Flower Bouquet"/>

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

<img src="../otherImages/flowers.jpg" alt="A Flower Bouquet"/>