Как правильно ссылаться на локальные ресурсы в HTML?

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

Возьмите эти примеры, в чем разница между этими эталонными путями?

  • <img src="myfile.png" /> (без косой черты в начале)
  • <img src="/myfile.png" /> (с косой чертой в начале)
  • <img src="folder/myfile.png" /> (без косой черты / в подпапке)
  • <img src="/folder/myfile.png" /> (с косой чертой в начале / в подпапке)
  • <img src="../folder/myfile.png" /> (с точками и косой чертой в начале / в подпапке)

html ref src
person Chase Florell    schedule 23.01.2013    source источник
comment
Во всех случаях это пути относительно базового каталога HTML-документа, который является URL-адресом, из которого документ был загружен. Если документ был загружен с URL-адреса в Интернете, все URL-адреса разрешаются по отношению к этому хосту. Абсолютные пути разрешаются относительно корня сайта, относительные URL-адреса — относительно пути страницы, на которой они появляются. URL-адреса будут разрешаться в локальные ресурсы только в том случае, если страница была загружена из локального HTML-файла (обычно это URL-адрес file://...).   -  person Jim Garrison    schedule 24.01.2013
comment
@JimGarrison Да, это не учитывает загрузку файлов на локальный компьютер без веб-сервера.   -  person Chase Florell    schedule 24.01.2013

Ответы (1)


arrow_upward
117
arrow_downward

  • Начальная косая черта указывает браузеру начинать с корневого каталога.
  • Если у вас нет косой черты в начале, вы ссылаетесь на текущий каталог.
  • Если вы добавите две точки перед косой чертой, это означает, что вы ссылаетесь на родителя текущего каталога.

Возьмите следующую структуру папок

демонстрационная структура папок

примечание:

  • галочка ROOT зеленая,
  • вторая галочка оранжевая,
  • третья галочка фиолетовая,
  • четвертая галочка желтая

Теперь в файле index.html.en вы захотите поместить следующую разметку

<p>
    <span>src="check_mark.png"</span>
    <img src="check_mark.png" />
    <span>I'm purple because I'm referenced from this current directory</span>
</p>

<p>
    <span>src="/check_mark.png"</span>
    <img src="/check_mark.png" />
    <span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
    <span>src="subfolder/check_mark.png"</span>
    <img src="subfolder/check_mark.png" />
    <span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
    <span>src="/subfolder/check_mark.png"</span>
    <img src="/subfolder/check_mark.png" />
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
    <span>src="../subfolder/check_mark.png"</span>
    <img src="../subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
    <span>src="subfolder/subfolder/check_mark.png"</span>
    <img src="subfolder/subfolder/check_mark.png" />
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
    <span>src="/subfolder/subfolder/check_mark.png"</span>
    <img src="/subfolder/subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

Теперь, если вы загрузите файл index.html.en, расположенный во второй подпапке
http://example.com/subfolder/subfolder/

Это будет ваш выход

введите здесь описание изображения

person Chase Florell    schedule 23.01.2013