Почему картинки не открываются в html
Перейти к содержимому

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

  • автор:

Не отображаются картинки. как исправить?

Картинка по пути assets/img/matrix.png существует? В браузере нужно открыть исходный код страницы (ctr + U или правой кнопкой мыши — показать исходный код) и кликнуть на ссылку картинки в коде, если не открывается картинка, значит пути проверяйте.

Спасибо большое. Открыла глаза и увидела, что не туда поместила папку img

Sign up or Log in to write an answer

  • Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

  • Отзывы
  • Политика конфидециальности
  • Условия использования
  • Блог
  • Цена и оплата
  • Курсы и скринкасты
  • Сертификаты
  • Партнерская программа
  • Комьюнити

Наши курсы и скринкасты

  • HTML/CSS Advanced
  • Bootstrap 4
  • Vue JS
  • Linux, GIT and web-hosting
  • HTML and CSS
  • Modern Javascript
  • Javascript/jQuery
  • Codeigniter
  • Все курсы и скринкасты

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

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

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

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

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

Картинка

Тот, кто уже хорошо знает 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.

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

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

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

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

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

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

    avb-intik 08.05.2012 06:09:06

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

    Admin 08.05.2012 13:03:58

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

    felix 25.08.2016 21:34:33

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

    kan2170 21.05.2012 13:48:50

    Картинка

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

    Admin 21.05.2012 13:54:03

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

    sync.o 02.06.2012 09:58:07

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

    Frederico 17.10.2012 17:26:47

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

    Admin 17.10.2012 18:27:11

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

    last_andrei 08.05.2013 22:50:19

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

    Admin 09.05.2013 11:05:35

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

    Gitara200026 17.08.2013 18:36:06

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

    Marking 18.09.2013 18:51:24

    Шапка сайта

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

    GALAPERIDOL 01.11.2013 15:40:48

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

    alekspro_shell 10.04.2014 01:36:02

    Шапка сайта

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

    daniil766711 27.05.2014 17:53:16

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

    daniil766711 02.06.2014 17:01:33

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

    Che777 23.06.2014 13:10:53

    Шапка сайта

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

    tikkiwiki 25.06.2014 09:52:21

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

    Che777 25.06.2014 11:19:29

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

    acmpis 11.09.2014 23:26:03

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

    Landau_1965 29.09.2015 23:30:17

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

    write2sd 13.02.2016 23:53:31

    Картинка

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

    P_Sh 19.04.2016 19:51:55

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

    VASJA 14.06.2016 13:31:09

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

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

    Егор2048 18.03.2020 02:34:35

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

    RoKKON 23.04.2020 18:17:56

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

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

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Что делать, если не открываются картинки на сайте

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

    00:00 Введение
    00:44 Как выглядит картинка, которая не отображается на сайте
    00:53 Как понять, что проблема на стороне пользователя?
    01:14 Из-за чего могут не отображаться картинки на сайте?
    01:38 Как включить отображение картинок в Google Chrome
    01:56 Как включить отображение картинок в Яндекс Браузере
    02:10 Как включить отображение картинок в Safari
    02:29 Картинки не отображаются из-за того, что кэш и cookie перегружены
    03:01 Как отключить режим «Турбо» в браузерах
    03:38 Проблемы с расширениями браузеров
    04:40 Отключение антивируса для отображения картинок на сайте
    05:27 Как очистить кэш DNS на Windows
    05:56 Как очистить кэш DNS на MacOS
    06:22 Как включить JavaScript в Google Chrome
    06:48 Как включить JavaScript в Яндекс Браузере
    07:02 Как включить JavaScript в Safari
    07:12 Как вернуть Google Chrome к настройкам по умолчанию
    07:27 Как вернуть Яндекс Браузер к настройкам по умолчанию
    07:38 Как вернуть Safari до первоначальных настроек
    08:27 Дополнительные варианты решения проблемы

    Не отображаются картинки когда открываю через браузер Index.html [закрыт]

    Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

    Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *