Как прописать путь к картинке в html: Добавление рисунка | htmlbook.ru

Содержание

Добавление рисунка | htmlbook.ru

Для добавления изображения на веб-страницу используется тег <img>, атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

<img src="URL" alt="альтернативный текст">

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod. ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 10.1. Пример размещения файлов

Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif.

Рис. 10.2. Пример размещения файлов

В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.

Пример 10.1. Вставка изображения в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Добавление рисунков</title>
 </head>
 <body>
  <p><img src="http://webimg.ru/themes/cloverfield/images/ref_collage.gif" 
        alt="Это абсолютный адрес размещения изображения"></p>
  <p><img src="/example/images/home.png" 
        alt="Адрес размещения изображения относительно корня сайта"></p>
  <p><img src="images/home.png" 
        alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
 </body>
</html>

Как правило, в качестве формата графического файла выступает GIF и JPEG.

изображения

Тег <img>

java — Неправильно работает относительный путь к файлу при добавлении картинки в HTML

Хочу поставить картинку на странице сайта. Картинка лежит в той же папке, где и HTML-шаблон, в котором нужно картинку отобразить.

Как я добавляю картинку

<img src="logo.png">

Сервер написан на Java, Фреймворк Spring.

Проблема

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

Вопрос

Как сделать так, чтобы картинка не искалась по ссылке к моему сайту, а искалась как файл, который находится внутри папки с кодом сайта?

java
html
spring

На самом деле тот путь, который указан в src мало связан с путем на диске.

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

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

То же и с ресурсами. Ваш <img src="logo.png"> означает, что браузер отправит запрос на вебсервер в котором путь отсчитывается от корня базового урла (в Вашем случае — домена). Механизм маппинга попробует найти подходящий контроллер, для такого запроса.

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

Создать директорию «static» внутри директории «resources», положить в директорию «static» нужную картинку.

Далее, вместо <img src="logo. png"> использовать <img src="/logo.png" alt="">

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Пути к файлам HTML

❮ Предыдущий Далее ❯

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Примеры пути к файлу

Путь	Описание
	Файл «picture.jpg» находится в той же папке, что и текущая страница
	Файл «picture.jpg» находится в папке images в текущей папке
	Файл «picture.jpg» находится в папке с изображениями в корне текущей сети
	Файл «picture.jpg» находится в папке на один уровень выше текущей папки

Пути к файлам HTML

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Пути к файлам используются при ссылке на внешние файлы, например:

Веб-страницы
Изображения
Таблицы стилей
JavaScripts

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL-адрес файла:

Пример

w3schools.com/images/picture.jpg» alt=»Mountain»>

Попробуйте сами »

Тег описан в главе: HTML-изображения.

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

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

Пример

Попробуйте сами »

В следующем примере путь к файлу указывает на файл в папке изображений, расположенной в текущая папка:

Пример

Попробуйте сами »

В следующем примере путь к файлу указывает на файл в папке images, расположенной в папка на один уровень выше текущей папки:

Пример

Попробуйте сами »

FORUM | О

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

Путь к файлу HTML — javatpoint

следующий → ← предыдущая

Путь к файлу HTML используется для описания расположения файла в папке веб-сайта. Пути к файлам похожи на адрес файла для веб-браузера. Мы можем связать любой внешний ресурс для добавления в наш файл HTML с помощью путей к файлам, таких как изображения, файл, файл CSS, файл JS, видео и т. д.

Атрибут src или href требует атрибута для связи любого внешнего источника с файлом HTML.

Ниже приведены различные типы для указания путей к файлам:

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

Пути к файлам используются на веб-страницах для ссылки на внешние файлы, например:

Веб-страницы
Изображения
Таблицы стилей
JavaScript

Существует два типа путей к файлам:

Абсолютные пути к файлам
Относительные пути к файлам

Абсолютные пути к файлам

Абсолютный путь к файлу указывает полный URL-адрес.

Пример:

<тело>

Использование полного пути к файлу URL

Протестируйте сейчас

Относительные пути к файлам

Относительный путь к файлу указывает на файл, связанный с расположением текущей страницы.

Пример:

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

<тело>

Использование относительного пути к файлу

Протестируйте сейчас

Пример:

Таким образом, путь к файлу указывает на файл в папке изображений, расположенной в текущей папке.

<тело>

Использование относительного пути к файлу

Протестируйте сейчас

Пример:

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

Как прописать путь к картинке в html: Добавление рисунка | htmlbook.ru

Добавление рисунка | htmlbook.ru

java — Неправильно работает относительный путь к файлу при добавлении картинки в HTML

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

Отправить без регистрации

Отправить без регистрации

Пути к файлам HTML

Примеры пути к файлу

Пути к файлам HTML

Абсолютные пути к файлам

Пример

Относительные пути к файлам

Пример

Пример

Пример

Рекомендации

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие примеры

FORUM | О

Путь к файлу HTML — javatpoint

Абсолютные пути к файлам

Пример:

Использование полного пути к файлу URL

Относительные пути к файлам

Пример:

Использование относительного пути к файлу

Пример:

Использование относительного пути к файлу

Пример:

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

Рубрики

Рубрики