HTML: работаем с картинками

Как вставить image на сайт

Тег <img> предназначен для отображения на странице изображений.  Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>.

Ниже я показал форму вставки.

<img src="URL" alt="альтернативный текст">

 

URL – это адрес картинки, он может быть указан путем к папки, или ссылкой.  Лучше хранить картинки у себя, по скольку с интернета они могут пропасть.

alt – текст, который будет отображен если картинка не сможет прогрузиться или будет показан пока картинка грузится. Очень полезно если у пользователя плохой интернет.

Нужно подробнее описать как прописывать путь к картинке. Все приведу в примере.

В данном случае мы находимся в my-index.html ,  нам нужно обратиться к картинке first-image.png в папке img, пропишем путь.

<img src="/img/first-image.png" alt="первая картинка">

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

<img src="../img/first-image.png" alt="первая картинка">

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как “/Папка/Имя файла” со слэшем вначале. Так, запись <a href=”/course/”>Курсы</a> означает, что ссылка ведет в папку с именем cours. И располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Путь проложенный ссылкой

Часто встречается такое что картинка была вставлена ссылкой.

<img src="https://shepme.com/wp-content/uploads/2018/10/img2.png?resize=784%2C442" alt="первая картинка">

Так же картинку можно установить на фон. С помощью

<style>
background-image: url(corse/image.png);
</style>

 

Один комментарий

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *