Как указать путь к картинке

Добавление рисунка

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

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. Вставка изображения в документ

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

—
Длительность: 6:53

И вот мы дошли до самого классного и прикольного тега – тега «img», – который позволяет нам картинки вставлять на страницу.

Давайте я вам сначала покажу картинку. Я нашёл вот такую вот картинку Audi.

Я просто очень люблю Audi, поэтому я в уроках всегда вставляю Audi.

Давайте напишем тег «img» и пропишем вот такой непонятный код:

Теперь у нас на странице проявится эта картинка.

Как, собственно, всё это работает? Мы пишем тег «img». Он одиночный, у него нет закрывающего тега. У нас есть атрибут «src», сокращенно от «source». И да, если кто не понял «img» от слова «image» – от слова «картинка». «Source» – путь, то есть мы прописываем путь к картинке, где она у нас лежит. Об этом мы отдельно ещё поговорим в следующем уроке. И атрибут «alt», который позволяет задать описание нашей картинке. Давайте напишем: «Описание картинки».

Для чего нам нужен атрибут alt? Дело в том, что, опять же, когда поисковик (Яндкс, Google) заходит к вам на страницу, он не может посмотреть на страницу и увидеть картинку, то есть он не на столько развит, чтобы посмотреть на картинку и понять, что на ней нарисовано. Поэтому мы пишем атрибут «alt», в котором пишем описание картинки, то есть что в ней находится, чтобы Google зашёл…

Давайте всё-таки более конкретно здесь напишем, чтобы было понятно напишем здесь Audi.

Здесь написано Audi, поэтому, когда поисковик зайдёт на эту страницу и посмотрит на тег «alt», он поймёт, что на ней нарисовано Audi. Всё-таки текст Google читать умеет.

Давайте зайдём в Google, введём в поиске Audi и зайдём в картинки.

Как видите, много здесь выдалось всяких картинок, и я на сто процентов уверен, что у каждой из этих картинок в «alt’е» есть слово Audi. Давайте любую возьмём, перейдём на страницу с этой картинкой, кликнем правой кнопкой «Посмотреть код». Что у нас написано в «alt’е»? «Ауди в лизинг».

По слову «Ауди» мы и нашли нашу картинку.

Соответственно, если вы хотите, чтобы ваши картинки в Goggle индексировались, то обязательно заполняйте атрибут «alt». Если вам в целом пофиг на это, нужны, не нужны картинки в Google, то можете не писать, главное написать тег «img src» и в нём прописать путь к картинке.

Так же хочу заметить, что сейчас вы увидели картинку, она у нас 1000х623 px. А что, если нам нужно картинку уменьшить? Для этого у нас есть два атрибута. Первый – «width», где вы можете задать ширину нашей картинки.

То есть сейчас она у нас по ширине 200 px, и высота меняется пропорционально ширине нашей картинки, то есть картинка пропорции свои не изменяет.

Соответственно. Если мы зададим ещё высоту 200 px, то картинка изменит свои пропорции, то есть ширина задана 200 px и высота тоже 200 px.

А если мы сделаем только высоту 200 px, то ширина меняется согласно пропорциям этой картинки. Поэтому, на будущее, если вам нужно изменить размер картинки, то задавайте либо ширину, либо высоту, потому что иначе пропорции будут ломаться, и тогда всё будет плохо. Либо ширину задавайте в тех пропорциях, в которых сделана эта картинка.

Если вам нужно картинку вставить в квадрат, но при этом она прямоугольная, то с помощью тега «img» вы этого не добьётесь. Как это делать, мы будем изучать уже в CSS. Там будет свойство «background» и там мы посмотрим, как это можно сделать. То есть тег «img» используется только в том случае, если картинка, которая будет вставляться на страницу, будет иметь те же пропорции, что и исходник, то есть если она у вас прямоугольная, а вам нужна квадратненькая, то тут уже не подходит. Плюс, если вам нужно картинку индексировать в поиске, то обязательно использовать тег «img». Если вы тег «img» не используете, то картинка ни каким образом индексироваться в поиске не будет.

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

Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Установил путь к рисунку как /images/pic.gif, но рисунок не отображается на веб-странице. Почему?

Слэш (символ /) перед именем файла или папки обозначает, что отсчет ведется от корня сайта. Соответственно, путь /images/pic.gif следует понимать так. В корне сайта находится папка с именем images, а в ней располагается файл pic.gif. Данный способ записи работает под управлением веб-сервера, поэтому на локальном компьютере браузер интерпретирует путь как c:/images/pic.gif , а такой папки и файла, вероятнее всего, нет (пример 1).

Пример 1. Путь к файлу относительно корня сайта

HTML5 IE Cr Op Sa Fx

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

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Как указать в img путь картинки?

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

— Но фото на сайте не отображается. Почему так? как будет правильно?

• Вопрос задан более трёх лет назад
• 18465 просмотров

Комментировать
Решения вопроса 1

протокол file:/// поставь спереди

file:///C:\РАБОЧИЙ СТОЛ\Все папки\фото\Обои рабочий стол\1.jpg

Ответ написан более трёх лет назад
Vakha1 @Vakha1 Автор вопроса
Так тоже не отображается.

Vakha1, значит путь к файлу неправильный. Скопируйте из проводника.

Vakha1, в свойствах файла бывает полный путь к файлу.

Vakha1, только смотрите. Если у вас сайт на локальном хосте, у вас не будет такого доступа к файлам. А если просто .html файл открыли в браузере, то можно.

Vakha1 @Vakha1 Автор вопроса

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

Nikita-Fast @Nikita-Fast

Vakha1, для начала надо путь указать не от диска а от папки на сервере , к примеру мы имеем локальный хост с таким каталогом :

то ваши изображения должны быть не в file:/// а в папке img на локальном хосте и путь будет такой

Vakha1, да. Файлы должны быть в опубликованной папке. Иначе это была большая дыра. Ты ко мне на сайт заходишь, а я у тебя на сервере копаюсь. По этому это не получится.