Почему не отображается картинка на сайте?
Давно я уже не писал ничего для новичков, в основном, пишу уже для достаточно опытных специалистов. Поэтому чтобы исправить это положение, я решил написать статью по теме наиболее частого вопроса, который я постоянно получаю: «Почему не отображается картинка на сайте?«. В этой статье я постараюсь разобрать все причины, почему изображение не появляется на сайте на основании того, что я видел у своих учеников.
Не будем тянуть резину, а сразу перейдём к делу.
Первая ошибка
Тот, кто уже хорошо знает 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 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
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Работа с картинками в HTML и CSS
Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.
Содержание:
Как вставить картинку в HTML
В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.
Ещё одним обязательным атрибутом элемента <img> является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.
В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.
Таблица. Основные атрибуты элемента <img>
Здесь w — дескриптор ширины, который представляет собой целое положительное число, за которым следует w.
HTML картинка. Примеры
Как добавить картинку в HTML?
Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег <img> и его обязательные атрибуты src и alt. Также, поскольку тег <img> – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, <p> или <div>.
Как изменить размер картинки в HTML?
Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.
Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).
Как указать путь к файлу изображения в HTML?
Адрес ссылки на файл изображения может быть абсолютным и относительным.
Абсолютный путь показывает точное местонахождение файла, а относительный показывает путь к файлу относительно какой-либо «отправной точки».
Примеры:
https://site/img/D-Nik-Webmaster.jpg – это абсолютный адрес файла D-Nik-Webmaster.jpg так как путь к нему указан полностью.
/img/D-Nik-Webmaster.jpg – это относительный путь от корневого каталога. Знак «/» в самом начале указывает на то, что это корень каталога и выше по директории подниматься нельзя. Если файл index.html (HTML-документ) находится в каталоге site, то этот каталог будет корневым («отправной точкой»).
../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.
../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.
Как сделать картинку ссылкой в HTML
Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента <img> обрамить в тег <a>.
Картинка CSS. Примеры
Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.
Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.
Как поставить на фон картинку в HTML?
Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.
Как установить размер картинки в CSS
Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:
- Давайте создадим новый класс imgsize.
- Для элементов этого класса пропишем свойство width равным 350px.
- Присвоим картинке созданный ранее класс imgsize.
Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).
Как сделать картинку адаптивной
Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.
Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:
Как разместить текст на картинке
Как выровнять картинку по центру веб-страницы
Способ №1
Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.
Способ №2
Помещаем картинку в блок <div> или параграф <p>, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.
Как сделать обтекание картинки текстом
Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.
Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:
Как выстроить картинки в ряд
Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок <div> или параграф <p>, присвоить класс этому блоку (или параграфу), и установить следующие правила:
Весь код будет выглядеть так:
Как изменить размер картинки при наведении на неё курсора мыши
Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.
Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:
Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок <div>. Для этого блока задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока <div>.
Почему не отображается картинка в HTML?
Причин почему картинка не отображается на веб-странице может быть несколько:
HTML <img> tag is not working
loading.gif and j.jpg are present in same directory as html file. loading.gif is displayed fine in ie 8 but j.jpg doesn’t load.
When I use firefix, both images display correctly.
11 Answers 11
Check that JPG file extension is uppercase in the file system. I suspect that it is lowercase. Also be sure to close the image tag.
will be like this
I had the same problem, i deiscovered that when working with wordpress you should use this code for images:
Was the img file originally in another extension? If so, revert to the original extension.
I took a screenshot on my Windows PC in .png format. I changed the extension to .jpg (thinking it would work the same as my Mac). IE didn’t like it, but Firefox was fine with it.
I changed the extension back to .png, and it worked fine in both browsers.
lowercase the extension, and close the img tags, you are using XHTML 1.0 Strict !
EDIT: maybe you hit a IE8 bug. +1 to the question 🙂
Let’s try like this: using a page really XHTML 1.0 Strict compliant,
create two copies of the file, so you will have the three files listed above. Then run the page in IE8 and tell us which one is working.
Is it broken in IE9/10 too?
Also, if the code you posted above is exactly what’s in your file, you have an incorrect character (`) right before the doctype declaration.
Internet Explorer breaks when your HTML is wrong, browsers like Firefox are much more lenient and try and fix things for you.
I think it is because of the specific images. Check if you have permission to use those files. I also had the same problem. I had two OS(Ubuntu and Windows) running and the image I was using was coming from Windows local disk. After I solved this permission issue, it worked.
recently i was working in a web project using WAMP server. i placed my web site under c:/wamp/www/my_site folder and referenced an image from this folder on a page. the image did not display. i referenced another image at desktop . bingo, it worked. i think its the permission thing. 🙂