Подтвердить что ты не робот

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

demo folder structure

уведомление:

  • Флажок 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/

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

enter image description here