Почему изображение не отображается на сайте?

Почему изображение не отображается на сайте

Эту статью я написал для новичков, которые только еще начинают изучать HTML. Но уже на этом этапе сталкиваются с кучей вопросов и один из них это: «Почему изображение не отображается на сайте?». В данной статье, я как раз таки постараюсь описать наиболее частые причины этого возникновения.

Первая ошибка

<img scr="images/picture.jpg" alt="Изображение" />

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

Вторая ошибка

<img src="images/picture.jpg" alt="Изображение" />

Здесь, как мы видим, синтаксических ошибок нет. Но картинка все равно не отображается. Это может быть связано с неправильным указанием названия картинки. В операционных системах, как правило, расширение файлов не отображается и поэтому "picture.jpg" может являться всего лишь названием картинки без расширения. А на самом деле полное ее имя может оказаться «picture.jpg.png».

Узнать полное имя изображения вы можете, кликнув правой кнопкой мыши по этому изображению и выбрав пункт меню «Свойства». Далее перейдите на вкладку «Подробно» и здесь будет представлена вся информация об изображении.

Свойства изображения

В пункте «Имя», как раз отображается полное имя изображения вместе с расширением. И именно его необходимо использовать в атрибуте src.

Также, стоит заметить, никогда не называйте изображения кириллицей. Например: «картинка.jpg».

Третья ошибка

<img src="images/picture.jpg" alt="Изображение" />

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

Относительный путь

Путь «images/picture.jpg» актуален, если у нас расположение всех файлов, такое как на рисунке слева. Т.е. наша страница (в моем случае index.html) находится на одном уровне с директорией «images».

Мы относительно "index.html" пишем директорию "images", в которой находится изображение, и уже через слеш пишем название картинки. Если в директории "images" находилась бы еще одна директория (например: photo) и уже только в ней лежало наше изображение, то атрибут "src" имел бы следующий вид «images/photo/picture.jpg».

Относительный путь

Другой вариант, это когда наша страница (в моем случае index.html), находится во внутренней директории «directory». В этом случае, нам понадобится прописать следующий путь «../images/picture.jpg», относительно "index.html", для атрибута «src».

Запись «../» означает, что мы выходим из текущей директории «directory» и поднимаемся на уровень выше. А дальше, как обычно, пишем директорию "images" и через слеш прописываем название изображения.

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

Поэтому, будьте более внимательными, и все у вас будет хорошо.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийОдин комментарий

Артем 27 февраля в 13:07

Огромное спасибо!!!

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад