вместо картинки значок что делать на сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У меня все получилось

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

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

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

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

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

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

Источник

Вместо фото пустые квадраты

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

Причина #1: Переполненный кэш и cookie

Как вы знаете, во время работы в интернете браузер записывает на ваш жёсткий диск сотни временных файлов. Это помогает ускорить загрузку сайтов и «запомнить», что вы делали на разных ресурсах. Однако если периодически не выполнять очистку памяти, со временем программа начинает тормозить и работать некорректно, что иногда приводит к тому, что в браузере не отображаются картинки.

Необходимо удалить файлы кэша и куки, накопившиеся за всё время. Для этого откройте историю посещённых страниц (через меню либо горячую комбинацию Ctrl+H), нажмите кнопку «Очистить» и выберите соответствующие пункты. В конце рекомендуется перезагрузить программу.

Причина #2: Режим «Турбо»

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

В веб-обозревателях, поддерживающих данную функцию, в панели состояния или прямо возле адресной строки есть иконка «Турбо-режим» (к примеру, в «Яндекс.Браузере» это миниатюрный космический корабль). Если кнопка активна, кликните и отключите ускоренную загрузку страниц.

Причина #3: Отображение изображений отключено

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

Зайдите в расширенные (дополнительные) опции вашего веб-обозревателя и найдите пункт «Настройки контента» или «Настройки содержимого». Поставьте флажок возле пункта «Всегда показывать картинки», примените изменения и перезапустите программу.

Причина #4: Использование расширения AdBlock

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

Причина #5: Настройки антивируса

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

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

Причина #6: Вирусы

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

Полное сканирование ПК с помощью антивирусных программ. Здесь есть свои тонкости. Во-первых, лучше всего производить проверку в «Безопасном режиме Windows» — так антивирус может найти больше опасных файлов. Во-вторых, помимо проверки стандартным антивирусом («Антивирус Касперского», Avast, NOD32 и т. п.), рекомендуется установить и использовать специальные программы-сканеры, такие как Dr.Web, McAfee и GridinSoft Anti-Malware.

Что делать, если ничего не помогло?

Здесь есть всего 2 возможных варианта. Первый — вы случайно изменили что-то в конфигурации браузера. Если в «Мозиле» не отображаются картинки по этой причине, нужно ввести в адресную строку «about:config» и вернуться к стандартной конфигурации (Кнопка «Сбросить»). Кроме того, можно попробовать переустановить браузер, предварительно стерев все данные о программе.

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

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

Что делать, если пропали картинки в браузере

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

Очистка кэша в разных браузерах

Кэш представляет собой промежуточный буфер с быстрым доступом, в котором содержится наиболее часто запрашиваемая информация. Это упрощает работу в интернете, так как востребованные файлы выдаются браузером максимально оперативно. Постепенно таких файлов скапливается очень много. На поиск нужных элементов система тратит большое количество времени, что приводит к ухудшению производительности. Браузер будет работать медленно, а ускорить его можно путём очистки кэша, что позволит заодно решить проблему загрузки картинок.

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

Opera

Для оптимизации кэша в браузере Opera можно провести следующие действия:

В меню настроек переходим к пункту «Безопасность»

Нажимаем кнопку «Очистить историю посещений»

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

«Яндекс.Браузер»

В браузере «Яндекс» также могут возникнуть сбои в отображении картинок. Технология очистки кэша в этом случае похожа на работу с Opera:

Активируем пункт «Меню», а затем «История».

Для очистки кэша нужно открыть историю браузера

В истории посещений находится кнопка для очистки кэша «Яндекса»

При необходимости можно очистить и другие разделы браузера «Яндекс»

Google Chrome

Технология устранения скопившихся файлов в браузере Google Chrome мало отличается от рассмотренных случаев. В правом верхнем углу окна браузера нужно нажать кнопку «История» и перейти к соответствующему разделу. Открывается журнал посещений, где нужно найти кнопку «Очистить историю». Напротив строки «Файлы cookie» следует поставить отметку, а затем вверху около пункта «Удалить указанные ниже элементы» отметить графу «За все время» и нажать «Очистить историю».

Технология очистки кэша Google Chrome мало отличается от работы с «Яндексом»

Видео: как очистить кэш и куки Google Chrome

Как отключить быструю загрузку

Если загрузка веб-страницы длится очень долго, то браузер может автоматически запретить отображение картинок. В результате этого пользователь видит только текстовую информацию. Для устранения такого недочёта нужно изменить настройки. Технология работы похожа во всех браузерах. Рассмотрим поэтапные действия на примере Google Chrome:

В браузере нужно найти раздел «Картинки»

Параметр «Показывать все» является стандартной настройкой браузера

Для браузера Opera выполняется следующая последовательность действий: «Меню» — «Настройки», затем нажимаем «Сайты» — «Изображения» — «Показывать». Таким образом можно восстановить отображение картинок всего в несколько шагов.

В браузере Opera настроить отображение картинок можно в несколько шагов

Настройка расширений

За увеличение функциональности браузера отвечают его расширения. Иногда работа этими программами предполагает блокировку элементов, необходимых для оперативной работы сайта. Популярными вариантами таких расширений являются NoScript, Adblock и Adblock Plus. Определить параметр, который мешает отображению картинок, можно путём отключения всех расширений и поочерёдного их включения.

В Google Chrome

Для настройки параметров в Google Chrome нужно осуществить следующие действия:

В правом верхнем углу открываем меню, а затем раздел «Дополнительные инструменты» – «Расширения».

Для настройки Google Chrome нужно открыть вкладку «Расширения»

Удаление расширений позволяет настроить отображение картинок

В «Яндекс.Браузере»

Для оптимизации работы «Яндекса» нужно нажать «Меню», выбрать «Дополнения», а затем найти строку «Из других источников». Здесь следует выбрать ненужные дополнения, при наведении на них курсора мыши появится надпись «Удалить». Нужно нажать на неё и подтвердить действие, после чего расширение будет удалено.

В браузере «Яндекс» выбрать и удалить ненужные расширения можно в разделе «Дополнения»

В Opera

В браузере Opera удалить лишние дополнения можно так же, как и в других системах. Для этого проводятся следующие действия:

Попасть в раздел расширений можно при одновременном нажатии клавиш Ctrl+Shift+E или через раздел «Расширения» главного меню.

Заходим в раздел «Расширения» главного меню

Для удаления расширения следует нажать на крестик нужного блока

Отключение расширений позволяет ускорить работу браузера

Видео: как удалить расширение в браузере Opera

Подключение JavaScript

JavaScript представляет собой специальный язык программирования, позволяющий увеличить функциональность веб-страниц. Без него отображаемое содержимое сайтов будет скудным, а изображения могут отсутствовать. Поэтому необходимо включить его поддержку. Для этого нужно осуществить такие действия:

Видео: как включить и отключить JavaScript в Google Chrome

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

Этот баг встречается у многих. Листаешь фотки, особенно старые, и видишь вместо их миниатюр пустые серые квадраты.

Решение очень простое.

1. Выделяем серые квадраты, нажимаем на значок «Поделиться», затем «Дублировать». Создаются дубликаты с нормальными миниатюрами.

2. Удаляем пустые миниатюры.

Из минусов – сбивается порядок во вкладке «Альбомы»: система распознает дубликаты как новые фотки. Но в «Моментах» с сортировкой все хорошо.

Я – перфекционист, и не хочу нарушать порядок фотографий

1. Нажимаем на серый квадрат. Открывается фотка. Жмем на значок «Редактировать».

2. Выбираем любой эффект и применяем его, нажав на «Готово». Окно редактирования закроется.

3. Снова переходим в режим редактирования, нажимаем «Вернуть» и возвращаем фотографию к оригиналу.

После этого миниатюра отображается корректно.

И так с каждой фоткой, да. Спасибо, Apple.

(3.33 из 5, оценили: 3)

Источник

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

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

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

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

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

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

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

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

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 гораздо проще…

Источник