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

HTML img не отображается картинка по абсолютному пути

Есть у меня программа, с помощью которой пользователь выбирает себе аватар.
Пока он не выбрал аватар — отображается стандартная — та, которую выбрала я properties:

image.url=https://media.kasperskydaily.com/wp-content/uploads/sites/90/2017/05/06040328/incognito-mode-featured.jpg

controller:

@Value("$") private String imageUrl; @GetMapping("/home") public String home(Model model, Principal principal) < User currentUser = userService.findByUsername(principal.getName()); ListuserSecrets = userService.getUsersSecrets(principal.getName()); Image image = imageRepository.findByUserUsername(principal.getName()); imageUrl = image == null ? imageUrl : image.getName(); log.info("Image name: <>", image.getName()); model.addAttribute("image", imageUrl); model.addAttribute("user", currentUser); model.addAttribute("secretsSize", userSecrets.size()); return "home"; >

Должна сразу сказать — сохраняется картинка хорошо (на жестком диске, а в бд только метаданные). В логах вывелось название картинки, в проводнике я скопипастила и вставила в поиск — картинка открылась.
Выглядит это примерно так: E:\uploaded\image.png .
Но по ссылке из интернета картинка открывается хорошо, а с комплюктера не хочет HTML:

 //из кода выше на страницу передается переменная с расположением картинки и вставляется как ресурс

Немного поэкспериментировав без шаблонизаторов, с чистым html — трабл точно такой же: из инета — пожалуйста, а с комплюктера никак. Как можно решить эту проблему? (Запускаю на localhost с другого диска, на C:\Users. )

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 он отображает изображение в миниатютре, что лишний раз доказывает, что путь верный.

Вопрос задан более двух лет назад
946 просмотров

1 комментарий

Простой 1 комментарий

Почему не отображается картинка в html: что делать

Причин почему может не выводиться картинка в html довольно много. Рассмотрим самые частые ошибки синтаксиса.

Нарушен синтаксис атрибута 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-кода: как выполнить

Таким образом, рассмотрев все четыре ошибки, ответить почему не отображается картинка в html гораздо проще…

Причины, по которым картинки не отображаются на сайте

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

Самые типичные ошибки, при которых не отображаются картинки в браузере

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

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

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

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

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

Если же файл назван правильно, и все еще не отображаются картинки на сайте, то следует обратить внимание на расширение файла. Несоответствие форматов есть частой причиной «подвисания» изображений. Проблемы могут возникнуть тогда, когда пользователь вводит поиск .JPG (все буквы большие), а сервер выдает .jpg (маленькие буквы). Или же пользователь загружает разрешение .jpg, а на сайте предлагается формат .png. В таких случаях тоже отображение невозможно. Поэтому важно удостовериться, что указанное в коде разрешение картинки соответствует тому, что вы ищете. А также лучше давать название изображениям привычными маленькими буквами.

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

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

По каким еще причинам на сайте не отображаются картинки

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

Если вы не хотите сталкиваться с данной проблемой из-за плохой и некачественной работой сервера, обращайтесь сюда — hosting-cloud.com.ua. Мы предлагаем доверить ваш сайт нашим серверам и забыть о существовании не отображающихся картинок.