Html img не работает

Содержание

Почему изображение не показывается на сайте?
Несовпадение регистра
Неверный адрес файла
Использование локального адреса
Проверка изображений
Популярные рецепты
Почему не отображается картинка на сайте?
Первая ошибка
Вторая ошибка
Третья ошибка
Четвёртая ошибка
Комментарии ( 26 ):

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

При тестировании веб-страницы на локальном компьютере все изображения обычно показываются корректно, однако после публикации на сайте возникает ситуация, что рисунки не видны. Это может происходить по ряду причин, рассмотренных далее.

Несовпадение регистра

В большинстве случаев в качестве операционной системы веб-сервера выступают Unix-подобные системы, которые различают регистр файла. Иными словами, файлы с именами PIC.gif, pic.gif и Pic.gif являются разными. При обращении из HTML-кода эту особенность необходимо учитывать и писать адрес изображения следует именно так, как он записан в системе. Чтобы не возникало путаницы, обычно договариваются, что все имена файлов и папок пишутся в нижнем регистре, также хранятся и документы.

Неверный адрес файла

Ошибка доступа к файлу часто возникает при неверной записи имени файла или папки где он хранится, т.е. из-за обычной опечатки. Также это происходит при неправильном указании относительного адреса файла вида ../../images/file.gif.

Использование локального адреса

Некоторые программы для редактирования HTML-кода добавляют изображения в виде локального адреса, начинающегося на ключевое слово file:/// . Далее следует путь к файлу в виде строки c:/имя папки/имя файла . Изображение при этом исправно показывается на локальном компьютере, а на сервере нет, поскольку на нем не существует заданного пути. В подобных случаях достаточно заменить локальный адрес к файлу на относительный.

Проверка изображений

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

Читайте также: Условие php код bitrix

Проверка графического файла заключается в определении его целостности — файл не должен быть поврежден и обязан без проблем отображаться в браузере. Для этого в браузере достаточно ввести полный локальный путь к файлу, например file:///с:/www/girl.jpg .

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

Если файл записан на сервере как girl.jpg, то обращение к нему в примере некорректно.

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

Рис. 1. Абсолютный путь к графическому файлу

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

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

Не будем тянуть резину, а сразу перейдём к делу.

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

Картинка

Тот, кто уже хорошо знает HTML, мгновенно найдёт в данном коде ошибку. А ошибка здесь синтаксическая, так как атрибута «scr» не существует, а правильно писать «src«. Ошибка очень распространена, поэтому я решил её поставить первой.

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

Здесь никаких ошибок в коде не имеется, однако, если копнуть глубже, то название картинки, скорее всего, указано неправильно. Очень часто в ОС отключён показ расширений файлов, как следствие, image.jpg — это только имя файла, без расширения. Для решения проблемы надо включить показ расширений файлов в свойстве папок, далее увидеть, что файл называется, например, так: «image.jpg.png«, и это имя прописать в src.

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

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

Четвёртая ошибка

Очень часто ошибка состоит в том, что путь написан с ошибкой. А этот путь они просто откуда-то сдирают (с моего сайта, с книг, с моих курсов или ещё откуда-нибудь), не подумав о том, что это только путь, а не сама картинка. И по нему должна находиться само изображение. В большинстве случаев, её и близко нет. Иногда картинка имеется, но путь написан неправильно. Здесь надо просто уметь писать относительные пути. Начинается всё от каталога, в котором находится данная страница, далее пишем каталог, в котором находится картинка, а затем через слеш пишем название картинки. Если есть ещё один каталог на пути к картинке, то пишем и его (например, так: «images/photo/user1.jpg«). Если сама страница находится во внутреннем каталоге, также как и картинка, то нужно использовать «../» (например, так: «../images/image.jpg«). Всё просто, но вот возникают почему-то проблемы.

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

Создано 07.05.2012 14:02:48

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
Она выглядит вот так:
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 26 ):

Есть еще 5-я ошибка. У вас примеры написаны так, что можно подумать что между первой угловой скобкой и тегом img стоит пробел. Тогда как между этой угловой скобкой и тегом img пробел не допускается.

Это всё относится к синтаксическим ошибкам. Ещё можно такую ошибку допустить: s rc. Или такую: jmj вместо img. Не писать же о каждом символе.

зд. у меня такая проблема картина не отображается только значки ее что эта может быть я учусь спасибо за внимание

Никак не получается разместить. Все сделал как Вы говорите. Может я не правильно сохранил картинку ?

Странное название, попробуйте изменить, хотя ещё раз повторю, все проблемы описаны выше.

По поводу пути к картинке: на мой взгляд, лучше всегда указывать путь с корня сайта и начинать его со слеша: src=»https://myrusakov.ru/images/image.jpg». Тогда картинка будет доступна с любой страницы сайта, на каком бы уровне и подуровне она не находилась. То же самое касается указания путей к css и js-файлам.

Я делаю как Вы говорите, а у меня все равно не получается. Размер картинки имеет значение?

Нет, не имеет. Проверьте ещё раз, как правило всё из-за какой-нибудь мелкой ошибки.

Здравствуйте. Хотелось бы спросить вашего совета: на сервере картинки исправно загружались,однако после залива на сервер ещё одного файла картинки на одной из страниц перестали отображаться. Картинки находятся в одной папке, названия я все перепроверял. т.е. ни один из вышепредложенных вариантов мне не подходит, на мой взгляд. Можете ли вы что либо посоветовать? Заранее спасибо.

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

У меня не по поводу картинок)) я создал веб сайт,а в браузере не нечего нету((( просмотрел исходный код,а там нечего нету,почти

Здравствуйте Михаил! У меня проблема с картинками на сайте.Они не отображаются я прочитал эту статью но тем не менее картинки все равно не отображаются хотя делаю вроде всё правильно: Подскажите что не так.

скорее всего не правильно имя файла Пробел недопустим!

Испробовал все перечисленные выше варианты, ну ни чего не помогает. ()

Смотрите вы пишите A надо покозать путь НАпримеp- диск- папка- картинка

Здравствуйте Михаил! У меня проблема с размером картинки, не могу задать её высоту, , т.е. как бы не менял значение по высоте, картинка остается неизменной и очень большой.Почему?

Потому, что нужно задавать размер в px, чтобы не потерять качество. Так как % — это мера относительно чего-то.

Спасибо тебе добрый человек!!

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

картинку тоже не мог вставить около часа , проблема была в названии картинки и пути где находилась картинка. выход нашёл вот как ,вставил адрес пути картинки как мне показал браузер Мазила вот она file:///C:/site/images/Hydrangeas.jpg в общем получилось вот что вот ещё что Hydrangeas.jpg это название картинки которое прописывается в свойствах файла , без этого названия ничего не выходит . ну у вас будет своё название , всем удачи , проверяйте пути и названия картинок

Картинка

Здравствуйте Михаил тоже не отображается картинка перепробовал все варианты не знаю что делать

C картинками беда. Не знаю как узнать, включен в браузере показ картинок или нет. Все остальное пробовал, не помогло. А могут разниться коды, картинки и моего сайта?

А вот еще в тему: в IE, FF и Chrome картинка есть, а в Opera НЕТ. Только замещающий текст.

ПРОСЬБА ПОДСКАЗАТЬ!! ЧТО ЭТО МОЖЕТ БЫТЬ?

Ребят помогите пожалуйста пробовал по разному но не получается вот код: размеры не задаю потому-что они уже такие которые нужны. сам проверял по ссылке переходит всё норм но чёт не отображается

Если ещё актуально-нужно попробовать обновить Java

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник