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

Leave a Comment / Html / By /

Добавление рисунка | 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

Вопрос задан

Изменён 2 года 4 месяца назад

Просмотрен 394 раза

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

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

<img src="logo.png">

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

Проблема

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

Вопрос

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

  • java
  • html
  • spring

5

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

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

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

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

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

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

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

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

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

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

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

Почта

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

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

Почта

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

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

путь к файлу — значение источника изображения html /

спросил

Изменено 1 год, 2 месяца назад

Просмотрено 479 раз

пояснение относительного пути к файлу

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

, потому что «изображение размещено в том же каталоге, где находится исходный файл»

в html туториале на youtube (1: 13:01), из которого я учусь, изображения также помещаются в тот же каталог, где находится исходный файл, но перед именем изображения используется /. почему здесь использовалось /?

Связано ли это с «корнем текущей сети», как указано в руководстве по пути к файлу html w3? Если да, что означает «корень текущей сети»? я не могу найти никакого объяснения, относящегося к HTML

  • html
  • путь к файлу

3

Путь к файлу — это концепция, используемая в HTML для определения пути к файлу в структуре папок соответствующего веб-сайта.

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

Примеры В html вот синтаксис для включения файлов изображений на веб-страницы

имейте в виду, что 9Тег 0013 img

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

 некоторый текст здесь
  /*
    Атрибут alt используется для указания альтернативного текста для изображения, если изображение не может быть отображено
путь описывает расположение файла изображения в папке веб-сайта.
    */

Различные способы указать пути к файлам:

 :
//Указывает, что наше изображение находится в той же папке, что и текущая страница.

//Указывает, что наше изображение находится в папке images в текущей папке.

// Это указывает, что наше изображение находится в папке изображений в корне текущей сети.

  //Указывает, что наше изображение находится в папке на один уровень выше текущей папки.

В приведенном выше примере папка public_html является корневым каталогом веб-сайта, а файл index.html выполняется, когда кто-то переходит на домашнюю страницу сайта (www. example.com).

Хмель, у вас есть идея

9

Объяснение доступно по адресу Разница между ссылками с косой чертой и относительными ссылками

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

Итак, в вашем примере указывает, что

Это начнется в той же папке, что и текущий HTML-файл, затем в папке img, затем в самом файле.

указывает, что

Это бы посмотреть в корень хостинга сайта, потом найти папку img, потом сам файл.

указывает, что

Это начнется в той же папке, что и текущий HTML-файл, затем «вернется» на одну папку в родительскую папку, затем найдет папку img, а затем сам файл.

2

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

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

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

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

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

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

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

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

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

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

Ссылки, изображения и пути к файлам • Code The Web

Ссылки и изображения являются двумя наиболее распространенными элементами HTML. Узнайте, как использовать их вместе с путями к файлам в этой статье…

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

ПРИМЕЧАНИЕ. Я настоятельно рекомендую сначала прочитать Как работает Интернет, так как это поможет вам лучше понять пути к файлам. Кроме того, чтобы следить за превью в этой статье, было бы полезно прочитать Практика веб-разработки на вашем компьютере.

Начнем!

Изображения

Изображения добавляются в HTML с помощью тега . Синтаксис выглядит так:

Вы заметите, что не имеет закрывающего тега . Это потому, что внутри него нет никакого контента, поэтому он и не требуется. Элемент всегда должен иметь один атрибут: src . источник 9Атрибут 0014 изображения — это URL-адрес фотографии. Какая? Фотографии могут иметь URL-адреса? Да, верно. Помните, когда вы посещаете веб-сайт, сервер просто отправляет вам HTML-файл. Почему он не может отправить вам файл изображения? Например, попробуйте открыть это изображение в браузере:

https://codetheweb.blog/assets/img/icon1.png

Приступаем к программированию! Создайте новый HTML-документ в новой пустой папке. Во-первых, добавим нашу базовую файловую структуру:

 

    <голова>
        Ссылки и изображения
    
    <тело>

Если вы не понимаете приведенный выше фрагмент кода, вы можете прочитать эту статью.

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

 

    <голова>
        Ссылки и изображения
    
    <тело>
         blog/assets/img/icon1.png">

Предварительный просмотр вашей страницы. Вы должны увидеть изображение! Ура! Единственная проблема в том, что он выглядит немного большим. Добавьте атрибуты width и height к элементу изображения, равному 300px (300 пикселей). Проверьте, правильно ли вы поняли:

 

    <голова>
        Ссылки и изображения
    
    <тело>

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

Ссылки - это то, что делает весь Интернет Интернетом - ссылки, соединяющие различные сайты и страницы. Они сделаны с использованием тега , что расшифровывается как якорь . Допустим, мы хотим сделать ссылку, которая выглядит так:

Код The ​​Web

У ссылки есть две вещи, которые нам нужно определить: текст ссылки говорит , а где ссылается на . В HTML текст ссылки — это содержимое внутри тега, а URL-адрес для ссылки — это атрибут. Приведенный выше пример будет написан так:

 Code The Web

Атрибут href указывает URL-адрес ссылки и означает Гипертекстовая ссылка (вам не нужно это запоминать, это просто интересно). В вашем файле над изображением Code The Web сделайте ссылку на эту статью с надписью «Статья об изображениях и ссылках». Попробуйте угадать код:

 

    <голова>
        Ссылки и изображения
    
    <тело>
        Статья об изображениях и ссылках

Попробуйте предварительно просмотреть свой код. Упс! Это на одной линии! Давайте быстро добавим
, чтобы исправить это:

 

    <голова>
        Ссылки и изображения
    
    <тело>
         blog/links-images-about-file-paths/">Статья об изображениях и ссылках

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

Открывать ссылки в новой вкладке

Что делать, если вы хотите, чтобы эта ссылка автоматически открывалась в новой вкладке? Это часто делается для того, чтобы пользователи оставались на веб-сайте при переходе по ссылкам на другие веб-сайты или статьи. Вы можете открыть ссылку в новой вкладке, используя атрибут target для _blank . См. пример ниже:

 Code The Web

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

 

    <голова>
        Ссылки и изображения
    
    <тело>
         blog/links-images-about-file-paths/" target="_blank">Статья об изображениях и ссылках

Когда вы закончите, просмотрите свой код и нажмите на ссылку. Вы увидите, что он автоматически появится в новой вкладке. Как это круто!

Здесь ваш код указывает целевую вкладку для открытия ссылки, для которой мы установили значение _blank , что означает, что она откроется в новой пустой вкладке. Другими вариантами атрибута target являются _parent , _self и _top .

Другие элементы в качестве содержимого ссылки

Содержимое ссылки не всегда должно быть текстом — это может быть HTML. Например, давайте превратим изображение на вашей странице в ссылку, обернув его ссылкой на https://google.com . Посмотрите, сможете ли вы разобраться:

 

    <голова>
        Ссылки и изображения
    
    <тело>
         blog/links-images-about-file-paths/" target="_blank">Статья об изображениях и ссылках

Теперь, когда вы нажмете на свое изображение, оно отправит вас в Google.

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

Использование ваших собственных изображений

Что если вы хотите использовать свое собственное изображение? Для этого примера загрузите это потрясающее изображение ламы и используйте его.

На данный момент папка вашего сайта должна выглядеть так:

На данный момент index.html должен быть файлом со всем вашим кодом (если вы еще не настроили его таким образом, сделайте это сейчас). Теперь создайте внутри нее новую папку с именем images и сохраните / переместите / скопируйте туда свое изображение как llama. jpg :

Теперь пришло время добавить изображение в ваш файл index.html . Но что такое URL? Мы собираемся использовать то, что называется относительным URL-адресом . Относительный URL-адрес — это URL-адрес относительно HTML-файла. Файл в настоящее время находится в вашей основной папке (в этих примерах он называется [сайт-папка] , но неважно какой именно). Относительные URL-адреса не начинаются с file:// , http:// или https:// . Они просто начинаются с пути к файлу, если вы находитесь в текущей папке.

В этом случае нужное нам изображение находится в папке images и называется llama.jpg . Поскольку файл index.html и папка images находятся в одной папке, мы можем просто получить URL-адрес изображений 9.0014 для ссылки на папку с изображениями. Поскольку мы хотим получить доступ к изображению внутри папки, мы используем URL-адрес images/llama. jpg . Это потому, что это путь к изображению относительно папки index.html .

В файле index.html под логотипом Code The Web добавьте на страницу изображение ламы. Попробуйте вычислить код:

 

    <голова>
        Ссылки и изображения
    
    <тело>
        Статья об изображениях и ссылках

Предварительный просмотр. Ваааа! Ламы — это круто и все такое, но это изображение слишком велико. Попробуйте уменьшить его, как раньше…

 

    <голова>
        Ссылки и изображения
    
    <тело>
        Статья об изображениях и ссылках
        

         com">

Проблема в том, что теперь лама растянута. Мы можем исправить это, удалив атрибут width — таким образом высота будет равна 300px , а ширина будет уменьшена автоматически:

 

    <голова>
        Ссылки и изображения
    
    <тело>
        Статья об изображениях и ссылках

Вот и мы - наша лама выглядит намного здоровее!

Относительные пути также работают со ссылками. Создайте еще один файл HTML с именем hello.html в папке вашего веб-сайта и поместите в него что-нибудь очень простое:

  
Hello!

Теперь нам нужно выяснить, что такое относительный путь. Поскольку hello.html находится в той же папке, что и index.html , наш путь относительно папки будет просто hello.html . Добавьте ссылку на свой index.html приветствуя и ссылаясь на эту страницу - попробуйте рассчитать код:

 

    <голова>
        Ссылки и изображения
    
    <тело>
        Статья об изображениях и ссылках
        

        Здравствуйте

Я добавил
для удобства чтения, но это не обязательно. Просмотрите свой код и нажмите на ссылку. Поздравляем, вы освоили относительные URL-адреса!

Вывод

Круто! Теперь вы знаете о двух самых распространенных тегах в HTML — и , а также имеете представление о путях к файлам и относительных URL-адресах! Если вам понравилась статья, не забудьте поделиться и подписаться.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *