Не вставляется картинка в html: Почему изображение не показывается на сайте?

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

Тема:Добавление картинок

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

Несовпадение регистра

В большинстве случаев в качестве операционной системы веб-сервера выступают Unix-подобные системы, которые различают регистр файла. Иными словами, файлы с именами PIC.gif, pic.gif и Pic.gif являются разными. При обращении из HTML-кода эту особенность необходимо учитывать и писать адрес изображения следует именно так, как он записан в системе. Чтобы не возникало путаницы, обычно договариваются, что все имена файлов и папок пишутся в нижнем регистре, также хранятся и документы.

Неверный адрес файла

Ошибка доступа к файлу часто возникает при неверной записи имени файла или папки где он хранится, т.е. из-за обычной опечатки. Также это происходит при неправильном указании относительного адреса файла вида ../../images/file.gif.

Использование локального адреса

Некоторые программы для редактирования HTML-кода добавляют изображения в виде локального адреса, начинающегося на ключевое слово file:///. Далее следует путь к файлу в виде строки c:/имя папки/имя файла. Изображение при этом исправно показывается на локальном компьютере, а на сервере нет, поскольку на нем не существует заданного пути. В подобных случаях достаточно заменить локальный адрес к файлу на относительный.

Проверка отображения рисунка может происходить тремя путями: корректность графического файла, правильность HTML-кода и ревизия со стороны сервера.

Проверка графического файла заключается в определении его целостности — файл не должен быть поврежден и обязан без проблем отображаться в браузере. Для этого в браузере достаточно ввести полный локальный путь к файлу, например file:///с:/www/girl.jpg.

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

<img  src="../images/Girl.Jpg" alt="Фотография">

Если файл записан на сервере как girl.jpg, то обращение к нему в примере некорректно.

Со стороны сервера также можно проверить путь к файлу и его имя. Для этого в браузере Firefox следует щелкнуть по рисунку (или по месту, где он должен быть) правой кнопкой мыши и в контекстном меню выбрать «Информация об изображении». Появится окно показанное на рис. 1.

Рис. 1. Абсолютный путь к графическому файлу

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

изображения

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

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

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

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

<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% того, что решение Вы найдёте здесь, поэтому внимательно просмотрите всю статью и подумайте, что у Вас не так. И всегда помните, что ошибка может быть комплексной. Например, синтаксическая ошибка, путь указан неверно, да и имя неправильно написано. Такое тоже бывает, поэтому проверяйте себя на каждой ошибке, и после их исправления картинка обязательно появится на Вашем сайте.

• Создано 07.05.2012 14:02:48
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

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

javascript — вставка HTML Изображение не работает

спросил 6 лет, 3 месяца назад

Изменено 6 лет, 3 месяца назад

Просмотрено 3к раз

Я хочу вставить изображение на свою HTML-страницу, но в результате всегда получаю следующее:

Но я хочу поместить это изображение на свою HTML-страницу

Это код:

  jpg"/>
 

Я также храню изображение в папке с изображениями.

Я надеюсь, что кто-то может мне помочь.

• JavaScript
• HTML
• CSS

5

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

Если вы сейчас находитесь по адресу example.com/page1 , то

эквивалентно example.com/page1/images/avatar.jpg

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

Начальные / указывают на корень.

Попробуйте это

7

С опытом из моего прошлого, у меня тоже была эта проблема, и она проста. Тег вашего изображения такой...

В части src тега img у вас есть косые черты , наклоненные в неправильном направлении, если вы получаете изображения со своего компьютера , но если это есть в Интернете, у вас все в порядке, но отсутствует одна часть, как сказал Рошан Бумбра.

Если вы получаете образ с вашего ПК, сделайте следующее. Обратите внимание, что косая черта в начале не относится к пути к изображению на вашем ПК...

Если изображение находится в Интернете, выполните следующие действия. Рошан Бумбра сказал...

Дж.Картер 🙂

добавить ~/ перед путем как

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как исправить, что изображение не отображается на странице HTML

Фото с Unsplash

Есть две вещи, которые вы можете сделать, чтобы исправить HTML-изображение, не отображающееся в браузере:

• Проверьте путь src к тегу
• Проверить кеш веб-сайта на рабочем хосте

В этом руководстве объясняются вышеуказанные методы, начиная с проверки пути src

Проверьте путь src, чтобы исправить изображение, которое не отображается

Каждое изображение в HTML визуализируется с использованием тега с источником изображения, указанным в атрибуте src .

Вы можете указать относительный путь

или абсолютный путь к атрибуту src в зависимости от того, где вы размещаете изображение.

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

Предположим, в вашем проекте есть следующая структура папок:

 html-проект
├── изображение.jpeg
└── index.html
 

Затем внутри файла index.html вы можете отобразить изображение, используя следующий тег:

Когда ваше изображение находится на одну папку ниже, как в следующей структуре:

 html-проект
├── активы
│   └── image.jpeg
└── index.html
 

Затем нужно добавить папку assets в атрибут src следующим образом:

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

. ./, поэтому, если у вас есть следующая структура:

 html-проект
├── активы
│   └── image.jpeg
└── страницы
    └── index.html
 

Файл index.html может получить доступ к изображению, используя следующий атрибут src :

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

Иногда изображение с расширением .png записывается в src Атрибут как расширение .jpg .

Если путь к изображению src указан правильно, вам необходимо проверить, доступно ли изображение на вашем сервере.

Имейте в виду, что если вы используете локальный сервер разработки, такой как XAMPP, WAMP или MAMP, то образ должен находиться внутри папки разработки.

Для WAMP изображение должно находиться в папке www/, а для XAMPP и MAMP изображение необходимо поместить в папку htdocs/9. Папка 0038.

Наконец, если вы используете абсолютный путь, убедитесь, что вы не указываете путь к локальному жесткому диску в атрибут src .

Следующий пример не будет работать при размещении веб-сайта в сети:

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

Давайте посмотрим, как очистить кеш дальше.

Проверьте кеш, чтобы исправить изображение, которое не отображается

Одной из причин того, что изображения не отображаются на веб-сайте, является то, что браузер или кэш сервера все еще обслуживают посетителей старой HTML-страницей.

Это происходит только тогда, когда вы редактируете уже опубликованный HTML-файл, чтобы добавить на страницу новое изображение.

Очистка кеша браузера может отличаться в зависимости от используемого браузера.