Почему не работает тег img

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Почему не отображается картинка в html: что делать

Расскажем, что делать если картинка в тегах html не хочет отображаться…

Причин почему может не выводиться картинка в html довольно много. Рассмотрим самые частые ошибки синтаксиса.

Ошибка N1

Нарушен синтаксис атрибута src (написан как scr) тэга img. Явление этого сегодня довольно редкое, так как HTML-документы, как правило, пишутся в специализированных редакторах, которые подсвечивают правильно введённые тэги, атрибуты, спецсимволы. В комплексных средах разработки (DreamViever) подобная ошибка невозможна в принципе.

Ошибка №2

Почему не отображается картинка в html? Возможно синтаксис тега img и его атрибутов правильный, но неверно указано имя файла изображения.

Операционные системы по умолчанию скрывают расширение файла и поэтому картинка с именем picture.jpg.png в проводнике и диалоговых окнах открытия отображается как picture.jpg

Для исключения подобной ошибки необходимо в свойствах папки активировать показ расширения файлов.

Ошибка №3

Не верно указан полный путь к изображению в атрибуте src. Эта ошибка возникает вследствие механического копирования пути из другого HTML документа либо иного источника.

В HTML полный путь к любому файлу указывается относительно расположения страницы с которой осуществляется вызов. Если изображение находится во внутреннем по отношению к документу каталоге путь будет выглядеть так “имя внутреннего каталога/имя изображения”. Сам файл при этом может находится в других подкаталогах

Файл может находится еще и в нескольких подкаталогах. Именно поэтому проблема почему не отображается картинка в html немного сложнее чем может показаться сначала. Так в значении атрибута src указываются все подкаталоги.

Например: фотография myphoto.jpg находится в подкаталоге photo внутреннего каталога image. Значение атрибута src в этом случае прописывается как “image/photo/myphoto.jpg”.

Если изображение находится во внешнем по отношению к документу каталоге то прописывание полного пути начинается с “../”. Например: “../image/photo/myphoto.jpg”.

Ошибка №4

В браузере с помощью которого осуществляется просмотр документа отключен вывод изображений. В этом случае, если тэг img прописан полностью, то есть указан непустой атрибут alt будет выведено его значение. Например: при alt=”Моя фотография” отобразится «Моя фотография». При пустом или опущенном атрибуте alt большинство браузеров выводит пиктограмму изображения.

Таким образом, рассмотрев все четыре ошибки, ответить почему не отображается картинка в html гораздо проще…

Источник

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

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

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

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

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

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

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

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

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

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

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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 НЕТ. Только замещающий текст.

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

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

Источник

Тег Img Src в Html не работает независимо от типа ссылки

Я редактировал HTML-страницу и имел некоторые проблемы с заменой изображения. Ничего не отображается.
Затем я попытался создать простую HTML-программу, чтобы протестировать

Но это все еще не работает. Я попробовал все, включая, но не ограничиваясь,
1. Предоставление локальных ссылок в том же каталоге, в котором находится моя страница.
2. Создание подкаталога и предоставление его ссылки. (Как показано выше)
3. Дать полный путь
4. используя (правильные справочные методы ./ ../ и т. Д.)
5. Использование онлайн-ссылки
6. Жесткое обновление страницы ctrl + f5 в случае, если браузер каким-то образом использует кэшированное содержимое.
Но, похоже, ничего не работает появляется только поле, в котором должно отображаться изображение, с иконкой разбитого изображения.

приведенный выше код работает нормально

после просмотра работы я попытался
7. удалить расширение файла, если оно как-то действует, но это также не помогло

Может ли кто-нибудь помочь мне с этой проблемой.

4 ответа

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

Приведенная выше структура HTML должна быть в порядке. Я бы порекомендовал проверить следующее:

• Изменил ли сервер ваш код и заменил URL изображения в html.
• Находится ли само изображение в папке на сервере, которая является общедоступной? Что произойдет, если вы просто введете полный URL-адрес изображения в адресную строку браузера?
• Убедитесь, что имя файла и имя файла в теге «src» совпадают. Я неправильно написал имена файлов больше раз, чем хотел бы признать (первая заглавная буква против всех маленьких заглавных букв).
• Проверьте тип файла. Даже если расширение говорит «jpg», оно может иметь другой формат, и некоторые браузеры могут его не распознать.

В любом случае, если бы вы могли предоставить URL своего сайта, это было бы полезно.

Вам не хватает . До / образ. Это приводит к подпапке, где хранится ваше изображение.

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

Источник