Почему не отображается картинка на сайте?
Давно я уже не писал ничего для новичков, в основном, пишу уже для достаточно опытных специалистов. Поэтому чтобы исправить это положение, я решил написать статью по теме наиболее частого вопроса, который я постоянно получаю: "Почему не отображается картинка на сайте?". В этой статье я постараюсь разобрать все причины, почему изображение не появляется на сайте на основании того, что я видел у своих учеников.
Не будем тянуть резину, а сразу перейдём к делу.
Первая ошибка
<img scr="image.jpg" alt="Картинка" />
Тот, кто уже хорошо знает HTML, мгновенно найдёт в данном коде ошибку. А ошибка здесь синтаксическая, так как атрибута "scr" не существует, а правильно писать "src". Ошибка очень распространена, поэтому я решил её поставить первой.
Вторая ошибка
<img src="image.jpg" alt="Картинка" />
Здесь никаких ошибок в коде не имеется, однако, если копнуть глубже, то название картинки, скорее всего, указано неправильно. Очень часто в ОС отключён показ расширений файлов, как следствие, image.jpg - это только имя файла, без расширения. Для решения проблемы надо включить показ расширений файлов в свойстве папок, далее увидеть, что файл называется, например, так: "image.jpg.png", и это имя прописать в src.
Третья ошибка
<img src="image.jpg" alt="Картинка" />
Снова код правильный, однако, картинка всё равно не отображается. Если не помог предыдущий пункт, то, скорее всего, в браузере просто отключён показ картинок. Включите показ картинок в браузере, и Ваше изображение должно будет появиться.
Четвёртая ошибка
<img src="images/image.jpg" alt="Картинка" />
Очень часто ошибка состоит в том, что путь написан с ошибкой. А этот путь они просто откуда-то сдирают (с моего сайта, с книг, с моих курсов или ещё откуда-нибудь), не подумав о том, что это только путь, а не сама картинка. И по нему должна находиться само изображение. В большинстве случаев, её и близко нет. Иногда картинка имеется, но путь написан неправильно. Здесь надо просто уметь писать относительные пути. Начинается всё от каталога, в котором находится данная страница, далее пишем каталог, в котором находится картинка, а затем через слеш пишем название картинки. Если есть ещё один каталог на пути к картинке, то пишем и его (например, так: "images/photo/user1.jpg"). Если сама страница находится во внутреннем каталоге, также как и картинка, то нужно использовать "../" (например, так: "../images/image.jpg"). Всё просто, но вот возникают почему-то проблемы.
Я разобрал все ошибки, которые мне удалось вспомнить в своей практике. Если у Вас не отображается картинка на сайте, то 99.9% того, что решение Вы найдёте здесь, поэтому внимательно просмотрите всю статью и подумайте, что у Вас не так. И всегда помните, что ошибка может быть комплексной. Например, синтаксическая ошибка, путь указан неверно, да и имя неправильно написано. Такое тоже бывает, поэтому проверяйте себя на каждой ошибке, и после их исправления картинка обязательно появится на Вашем сайте.
-
- Михаил Русаков
Комментарии (26):
Есть еще 5-я ошибка. У вас примеры написаны так, что можно подумать что между первой угловой скобкой и тегом img стоит пробел. Тогда как между этой угловой скобкой и тегом img пробел не допускается.
Ответить
Это всё относится к синтаксическим ошибкам. Ещё можно такую ошибку допустить: s rc. Или такую: jmj вместо img. Не писать же о каждом символе.
Ответить
зд. у меня такая проблема картина не отображается только значки ее что эта может быть я учусь спасибо за внимание <img src="/img/4.jpg">
Ответить
Никак не получается разместить. Все сделал как Вы говорите. Может я не правильно сохранил картинку ? <img src = "kan.logo.jpg" alt = "Картинка" width = "150" height = "150"/>
Ответить
Странное название, попробуйте изменить, хотя ещё раз повторю, все проблемы описаны выше.
Ответить
По поводу пути к картинке: на мой взгляд, лучше всегда указывать путь с корня сайта и начинать его со слеша: src="/images/image.jpg". Тогда картинка будет доступна с любой страницы сайта, на каком бы уровне и подуровне она не находилась. То же самое касается указания путей к css и js-файлам.
Ответить
Я делаю как Вы говорите, а у меня все равно не получается. Размер картинки имеет значение?
Ответить
Нет, не имеет. Проверьте ещё раз, как правило всё из-за какой-нибудь мелкой ошибки.
Ответить
Здравствуйте. Хотелось бы спросить вашего совета: на сервере картинки исправно загружались,однако после залива на сервер ещё одного файла картинки на одной из страниц перестали отображаться. Картинки находятся в одной папке, названия я все перепроверял... т.е. ни один из вышепредложенных вариантов мне не подходит, на мой взгляд. Можете ли вы что либо посоветовать? Заранее спасибо.
Ответить
Попробуйте в другом браузере посмотреть. Если не заработает, то где-то Вы просто что-то сделали не так, чудес не бывает, чтобы из-за одной картинки все другие пропадали.
Ответить
У меня не по поводу картинок)) я создал веб сайт,а в браузере не нечего нету((( просмотрел исходный код,а там нечего нету,почти
Ответить
Здравствуйте Михаил! У меня проблема с картинками на сайте.Они не отображаются я прочитал эту статью но тем не менее картинки все равно не отображаются хотя делаю вроде всё правильно: <img src="images/my saite.png" width="100%" alt="Шапка сайта"/> Подскажите что не так!!!
Ответить
скорее всего не правильно имя файла <img src="images/my saite.png"> Пробел недопустим! <img src="images/mysaite.png">
Ответить
Испробовал все перечисленные выше варианты, ну ни чего не помогает. (<img src = "images/logo.jpg" width = "100%" alt = "Шапка сайта" />)
Ответить
Смотрите вы пишите <img src="saite.png"> A надо покозать путь НАпримеp- диск- папка- картинка <img src="E:\papka\img\domnk.png">
Ответить
У меня все получилось
Ответить
Здравствуйте Михаил! У меня проблема с размером картинки, не могу задать её высоту, <img src="images/images.jpg" alt="Шапка сайта" width="100%" height="50%"/>, т.е. как бы не менял значение по высоте, картинка остается неизменной и очень большой.Почему?
Ответить
Потому, что нужно задавать размер в px, чтобы не потерять качество. Так как % - это мера относительно чего-то.
Ответить
Спасибо тебе добрый человек!!
Ответить
Еще зависит от браузера. У меня например тоже не отражало картинку в опере. Никаких ошибок в коде не было. Проблема была в том, что названия папок были на кириллице. Если у кого тоже путь к картинке на кириллице то переименуйте папку на англ. слово.
Ответить
картинку тоже не мог вставить около часа , проблема была в названии картинки и пути где находилась картинка. выход нашёл вот как ,вставил адрес пути картинки как мне показал браузер Мазила вот она file:///C:/site/images/Hydrangeas.jpg в общем получилось вот что <img src="file:///C:/site/images/Hydrangeas.jpg" title="картинка" height="100" alt="Картинка" /> вот ещё что Hydrangeas.jpg это название картинки которое прописывается в свойствах файла , без этого названия ничего не выходит . ну у вас будет своё название , всем удачи , проверяйте пути и названия картинок
Ответить
Здравствуйте Михаил тоже не отображается картинка перепробовал все варианты не знаю что делать <img srс = "file:///D:/html/1.jpg" alt = "Картинка" width = "100" height = "100">
Ответить
C картинками беда. Не знаю как узнать, включен в браузере показ картинок или нет. Все остальное пробовал, не помогло. А могут разниться коды, картинки и моего сайта?
Ответить
А вот еще в тему: в IE, FF и Chrome картинка есть, а в Opera НЕТ!!! Только замещающий текст. <td width="660"><a href="index.html"> <img src="OF/LOGO.png" alt="Картинка" width="397" height="75" /></a></td> ПРОСЬБА ПОДСКАЗАТЬ!! ЧТО ЭТО МОЖЕТ БЫТЬ?
Ответить
Ребят помогите пожалуйста пробовал по разному но не получается вот код: <html> <body> <img scr="file:///C:/Users/egord/Desktop/im.jpg"/> </body> </html> размеры не задаю потому-что они уже такие которые нужны. сам проверял по ссылке переходит всё норм но чёт не отображается
Ответить
Если ещё актуально-нужно попробовать обновить Java
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.