Загрузка изображений на ваш сайт

Любые изображения, которые вы хотите разместить в HTML-коде вашего веб-сайта, должны быть сначала загружены в то же место, в которое вы отправляете HTML-код для веб-страницы, независимо от того, размещен ли сайт на веб-сервере, к которому вы обращаетесь по FTP, или используете веб-хостинг. Если вы используете веб-хостинг, вы, вероятно, используете форму загрузки, предоставленную сервисом. Эти формы обычно находятся в разделе администрирования вашей учетной записи хостинга.

Загрузка изображения на хостинг — это только первый шаг. Затем вам нужно добавить тег в HTML, чтобы идентифицировать его. 

Загрузка изображений в тот же каталог, что и HTML

Ваши фотографии могут находиться в том же каталоге, что и HTML. Если это так:

1. Загрузить изображение в корень вашего сайта.
2. Добавьте тег изображения в ваш HTML, чтобы указать на изображение.
3. Загрузите HTML-файл в корень вашего сайта.
4. Проверьте файл, открыв страницу в своем веб-браузере.

Тег изображения принимает следующий формат:

Предполагая, что вы загружаете фотографию луны с именем «lunar.jpg», тег изображения принимает следующую форму:

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

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

Загрузка изображений в подкаталог

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

Корень вашего сайта — это то, где отображается URL без каких-либо каталогов в конце. Например, для веб-сайта с именем «MyWebpage.com» корень имеет следующую форму: http://MyWebpage.com/. Обратите внимание на косую черту в конце. Так обычно указывается корень каталога. Подкаталоги включают эту косую черту, чтобы показать, где они находятся в структуре каталогов. Пример сайта MyWebpage может иметь структуру:

http://MyWebpage.com/ - корневой каталог
http://MyWebpage.com/products/ - каталог продукции
http://MyWebpage.com/products/documentation/ - каталог документации в каталоге продуктов
http://MyWebpage.com/images/ - каталог изображений

В этом случае, когда вы указываете на свое изображение в каталоге изображений, вы пишете:

Это называется абсолютным путем к вашему изображению.

Распространенные проблемы с изображениями, которые не отображаются

Поначалу показ изображений на вашей веб-странице может быть затруднительным. Две наиболее распространенные причины — это то, что изображение не было загружено туда, куда указывает HTML, или HTML написан неправильно.

Первое, что нужно сделать, это посмотреть, сможете ли вы найти свое изображение в Интернете. У большинства хостинг-провайдеров есть какой-то инструмент управления, который вы можете использовать, чтобы увидеть, куда вы загрузили свои изображения. После того, как вы решите, что у вас есть правильный URL для вашего изображения, введите его в свой браузер. Если изображение появляется, то у вас есть правильное местоположение.

Затем убедитесь, что ваш HTML-код указывает на это изображение. Самый простой способ сделать это — вставить URL-адрес изображения, который вы только что протестировали, в атрибут SRC. Повторно загрузите страницу и протестируйте.

Атрибут SRC вашего тега изображения никогда не должен начинаться с C: \ или же файл: Они будут работать, когда вы тестируете свою веб-страницу на своем компьютере, но каждый, кто посещает ваш сайт, увидит испорченное изображение. Это потому, что C: \ указывает на местоположение на вашем жестком диске. Поскольку изображение находится на вашем жестком диске, оно отображается при просмотре.