Почему не открывается фото в html

HTML Не открывается img с локальным src в браузере, где искать проблему?

Только начал изучать html, поэтому прошу не закидывать тапками.
Вот мой код

Проблема в том, что при открытии в браузере (пробовал chrome, mozila, explorer) не открывается картинка.

Перепроверил всё что только можно было:
1.Путь указан верно, пробовал как в одну папку с html файлом ложить и указывать src=»https://qna.habr.com/q/11.jpg», так и в отдельно созданную, которая лежит в папке с html.
2.Скрытие расширений файлов в настройках windows отключено
3.Картинка не битая, пробовал заменять другой
4.В настройках браузера отображение картинок включено, никаких расширений не установлено.
5.Переносил всё на другую машину, пробовал открыть там — результат тот же самый
6.Пробовал указывать длину ширину, помещать img в div — не помогает.
Гуглил свою проблему, везде на такое отвечают одним из перечисленных мною пунктов, но мне они не помогли. Укажите в чем еще может быть проблема?
Пишу в редакторе brackets, так как посчитал его удобным для себя, и кстати если в нем навести на src он отображает изображение в миниатютре, что лишний раз доказывает, что путь верный.

How to fix image not showing in an HTML page

There are two things you can do to fix an HTML image not showing up on the browser:

• Check the src path to of the <img> tag
• Check the cache of the website on the production host

This tutorial will explain the above methods, starting with checking the src path

Check the src path to fix image not showing

Every image in HTML is rendered by using the <img> tag with the image source specified in the src attribute.

You can put a relative path or an absolute path to the src attribute depending on where you place the image.

If your image is saved locally in a folder beside your HTML document location, then you can use the relative path.

Suppose you have the following folder structure in your project:

Then inside the index.html file, you can display the image using the following tag:

When your image is one folder down as in the following structure:

Then you need to add the folder assets to the src attribute as follows:

The relative path can also go up a folder by using the ../ pattern, so if you have the following structure:

The index.html file can reach the image using the following src attribute:

When you have the correct path, don’t forget to check the image extension and make sure it’s the same between the src and the actual image.

Sometimes an image with .png extension is written to the src attribute as .jpg extension.

Once the image src path is correct, then you need to check if the image is accessible by your server.

Keep in mind that if you use a local development server like XAMPP, WAMP, or MAMP, then the image must be located inside the development folder.

For WAMP, the image must be inside the www/ folder, while for XAMPP and MAMP you need to place the image inside the htdocs/ folder.

Finally, if you’re using an absolute path, make sure that you’re not placing your local hard disk path to the src attribute.

The following example will not work when you put the website online:

Once you’ve verified that the image is accessible in development, the image may still disappear from your production site because of the cache.

Let’s see how to clear the cache next.

Check the cache to fix image not showing

One reason for images not showing up on a website is because the browser or the server cache still serving the old HTML page to the visitors.

This only happens when you revise an already published HTML file to include a new image on the page.

Clearing browser cache may be different depending on the browser that you’re using.

If you’re using Chrome, then you can clear the cache by opening the developer tools menu and then right-click on the reload icon.

There, you can click on the Empty Cache and Hard Reload option:

The browser should refresh the page and pull the new page from your server.

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

About

Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.

Free Code Snippets Book

Get my FREE code snippets Book to 10x your productivity here

report this ad

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

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

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

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

Под внешними подразумевают всё то, что не связано конкретно с компьютером пользователя:

• проблемы с интернет-соединением;
• заблокированные провайдером или госучреждениями хостинги;
• перегрузка сервера сайта;
• ошибки разработчиков внутри файловой системы ресурса и другое.

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

Внутренних причин также может быть довольно много:

• параметры браузера, вшитых расширений и блокировщиков рекламы;
• DNS;
• файлы кэша и cookie;
• разные режимы ускорения и разблокировки доступов к сайтам;
• вирусы и антивирусы;
• исключения в отображении элементов страниц;
• собственные файлы браузера (при повреждении данных программы могут выдавать самые разные результаты работы).

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

Как решить проблему с неотображающимися картинками на веб-страницах

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

Переполненный кэш и cookie

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

Как очистить кэш и cookie

Для браузеров на движке Chromium (Opera, Google Chrome, «Яндекс.Браузер», Orbitum и др.) история очищается одинаково:

Нажимаем комбинацию клавиш Ctrl+H, а затем кнопку «Очистить историю».

Нажимаем комбинацию клавиш Ctrl+H, а затем кнопку «Очистить историю»

Отмечаем необходимые типы файлов и нажимаем «Очистить историю посещений»

В браузере Mozilla Firefox удаление кэша происходит немного по-другому:

Открываем новую вкладку, в правом верхнем углу щёлкаем значок шестерёнки.

Переходим в настройки, нажимая на значок шестерёнки в правом верхнем углу

На вкладке «Приватность и защита» нажимаем кнопку «Удалить историю»

Отмечаем данные, которые нужно очистить, и нажимаем кнопку «Удалить сейчас»

В обозревателе Microsoft Edge очистка истории проходит по принципу браузеров Chromium:

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

Нажимаем комбинацию клавиш Ctrl+H и кнопку «Очистить журнал»

Выбираем необходимые категории и щёлкаем по кнопке «Очистить»

В браузере Internet Explorer временные файлы удаляются через настройки обозревателя:

В правом верхнем углу щёлкаем значок шестерёнки и в выпавшем меню выбираем «Свойства браузера».

Выбираем пункт «Свойства браузера» в меню настроек

Переходим во вкладку «Общее» и выбираем удаление журнала браузера

Отмечаем галочками файлы кэша и cookie и нажимаем «Удалить»

Чистка кэша DNS

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

Нажимаем комбинацию клавиш Win+R, в открывшемся окне вводим ipconfig /flushdns и нажимаем кнопку OK.

В командной строке вводим ipconfig /flushdns и нажимаем кнопку OK

Видео: как очистить кэш DNS

Как включать и отключать режим Turbo в разных браузерах

Так называемый «Режим Turbo» в браузерах является не чем иным, как предоставлением VPN-сервиса от производителей обозревателя. На данный момент подобными встроенными функциями обладают только два браузера — Opera и «Яндекс.Браузер». При этом ускорение загрузки страниц очень условное, однако сервис VPN может как разблокировать доступ пользователя к картинкам, так и заблокировать его, если создатель сайта посчитает, что использование возможности обхода блокировок вредит его ресурсу. Потому использование режима Turbo — это палка о двух концах.

В браузере Opera включение этого режима производится следующим образом:

1. Нажимаем комбинацию клавиш Alt+P.
2. Переходим во вкладку «Браузер», затем пролистываем настройки вниз и ставим галочку у пункта «Включить Opera Turbo».

Во вкладке «Браузер» ставим галочку у пункта «Включить Opera Turbo»

В «Яндекс.Браузере» это делается ещё проще: в верхней панели, рядом с кнопкой «Свернуть», щёлкаем на значок с тремя горизонтальными линиями и в выпавшем меню выбираем «Включить турбо».

Щёлкаем на значок с тремя горизонтальными линиями и в выпавшем меню выбираем «Включить турбо»

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

Видео: как включить режим «Турбо» в «Яндекс.Браузере»

Управление исключениями отображений элементов страниц

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

В браузере Opera работа с исключениями проводится так:

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

В графе «Изображения» вкладки «Сайты» устанавливаем переключатель на пункт «Показывать все изображения»

Щёлкаем «Управление исключениями» и настраиваем отображение картинок на отдельных ресурсах

Щёлкаем на исключение и справа нажимаем на появившийся значок крестика

В браузере Google Chrome настройки исключения для изображений размещены немного по-другому:

В правом верхнем углу щёлкаем значок с тремя вертикальными точками и выбираем «Настройки».

В правом верхнем углу щёлкаем значок с тремя вертикальными точками и выбираем «Настройки»

В разделе «Дополнительные» выбираем «Настройки контента»

Щёлкаем по ссылке с надписью «Картинки»

Переключаем тумблер у пункта «Показать всё» вправо

Изображения не дают выводить блокировщики рекламы

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

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

В браузере Opera:

В настройках на вкладке «Основные» снимаем галочку с пункта «Блокировать рекламу», затем перезагружаем интересующую страницу.

Во вкладке «Основные» снимаем галочку с пункта «Блокировать рекламу», затем перезагружаем браузер

В настройках Google Chrome отключение блокировщика происходит схожим образом:

Открываем «Настройки контента», как показано выше, переходим в раздел «Реклама».

В меню «Настройки контента» переходим в раздел «Реклама»

Для отключения утилиты переводим тумблер «Заблокировано на сайтах» влево

В настройках «Яндекс.Браузера» функция блокировки рекламы находится в установках, на вкладке «Настройки». Достаточно снять галочку с пункта «Блокировка неуместной рекламы», чтобы программа перестала фильтровать контент.

Во вкладке «Настройки» снимаем галочку с пункта «Блокировка неуместной рекламы»

В обозревателе Mozilla нет единой настройки, которая отвечает за рекламу. Этот параметр разделен на две части:

• в настройках, на вкладке «Приватность и защита», снимаем галочку с пункта «Блокировать всплывающие окна»;
• в графе «Защита» снимаем все галочки.

Cнимаем галочки с пункта «Блокировать всплывающие окна» и во всей графе «Защита»

Как сбросить параметры браузера до заводских настроек

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

В браузере Opera необходимо сделать следующее:

Заходим в настройки, на вкладку «Браузер», и нажимаем кнопку «Сбросить настройки браузера», затем подтверждаем, нажав «Сброс» в появившемся окне.

Во вкладке «Браузер» нажимаем кнопку «Сбросить настройки браузера» и подтверждаем изменения

В «Яндекс.Браузере» открываем «Дополнительные настройки», как показано в примере выше, пролистываем страницу в самый низ и щёлкаем «Сбросить настройки».

В дополнительных настройках «Яндекс.Браузера» щёлкаем «Сбросить настройки»

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

В дополнительных настройках щёлкаем пункт «Восстановление настроек по умолчанию», затем нажимаем «Сбросить настройки»

Для Internet Explorer функция сброса настроек также предусмотрена: в свойствах обозревателя переходим во вкладку «Дополнительно», нажимаем «Восстановить дополнительные параметры», затем «Сброс». Соглашаемся, когда система предложит подтвердить действия, и перезагружаем компьютер.

В настройках IE, во вкладке «Дополнительно», нажимаем «Восстановить дополнительные параметры», а затем «Сброс»

Неверные настройки антивируса

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

1. Открываем встроенный антивирус Windows 10, переходим во вкладку «Управление приложениями/браузером».
2. Переставляем все тумблеры с положения «Блокировать» на «Выключить», чтобы «Защитник» больше не вмешивался в работу программ.

Во вкладке «Управление приложениями/браузером» переставляем все тумблеры с положения «Блокировать» на «Выключить»

ПК заражён вирусами

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

Бороться с вирусами нужно комплексным образом, а именно:

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

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

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

Щёлкаем правой кнопкой по значку Windows и выбираем элемент «Приложения и возможности».

Выбираем пункт «Приложения и возможности» в меню «Пуск»

В списке программ находим браузер, который хотим деинсталлировать, щёлкаем по нему и два раза нажимаем «Удалить»

В поиске Windows прописываем %appdata% и щёлкаем по лучшему соответствию

Выбираем папку с названием браузера, нажимаем комбинацию клавиш Shift+Delete и подтверждаем действие в появившемся окне

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

Видео: как полностью удалить браузер с компьютера

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

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

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

Включение картинок в браузере

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

Способ 1: очистка куки и кэша

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

Способ 2: проверка разрешения на загрузку изображений

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

Открываем Mozilla Firefox на определённом сайте и слева от его адреса кликаем «Показать информацию» и жмём на стрелку.

Похожие действия необходимо сделать в Google Chrome.

Запускаем Гугл Хром на каком-либо сайте и возле его адреса жмём на значок «Сведения о сайте».

а в открывшейся вкладке ищем раздел «Картинки».

В веб-браузере Opera действия проводятся немного по-другому.

1. Кликаем «Меню» — «Настройки».
2. Переходим в раздел «Сайты» и в пункте «Изображения» отмечаем галочкой вариант – «Показывать».

В Яндекс.Браузере инструкция будет похожа на предыдущие.

1. Открываем какой-либо сайт и возле его адреса жмём на значок «Соединение».
2. В появившейся рамке жмём «Подробнее».
3. Ищем пункт «Картинки» и выбираем вариант «По умолчанию (разрешить)».

Способ 3: проверка расширений

Расширение – программа, которая увеличивает функциональность обозревателя. Бывает, что в функции расширений входит блокировка некоторых элементов, нужных для нормальной работы сайтов. Вот несколько расширений, которые можно отключить: Adblock (Adblock Plus), NoScript и т.п. Если вышеприведённые плагины не активированы в обозревателе, но проблема всё равно есть, желательно отключить все дополнения и поочерёдно их включать, чтобы выявить, какой именно вызывает ошибку. Вы можете подробнее узнать о том, как удалить расширения в наиболее распространенных веб-обозревателях – Google Chrome, Яндекс.Браузере, Opera. А дальше рассмотрим инструкцию по удалению дополнений в Mozilla Firefox.

1. Открываем обозреватель и жмём «Меню» — «Дополнения».
2. Возле установленного расширения есть кнопка «Удалить».

Способ 4: включение JavaScript

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

В Яндекс.Браузере, например, производятся следующие действия:

1. На основной странице веб-браузера открываем «Дополнения», а далее «Настройки».
2. В конце страницы нажимаем на ссылку «Дополнительно».
3. В пункте «Личные данные» кликаем «Настройка».
4. В строке JavaScript отмечаем пункт «Разрешить». В конце нажимаем «Готово» и обновляем страницу, чтобы изменения вступили в силу.

Вот вы и узнали, что нужно делать, если изображения в веб-обозревателе не показываются.