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

Эту статью я написал для новичков, которые только еще начинают изучать 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" и через слеш прописываем название изображения.

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

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

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