Относительный путь в HTML

Я создаю веб-сайт на localhost. Я хочу, чтобы все ресурсы ссылок на моем веб-сайте относились к относительному пути (я имею в виду только внутренние ресурсы).

Веб-сайт

находится в

http://localhost/mywebsite

Я прочитал этот полезный вопрос Абсолютный и относительный URL.

Я нашел различия между /images/example.png и images/example.png

<a href="/images/example.png"> Link To Image</a>

Выше относительного пути следует возвращать ROOT_DOCUMENT/images/example.png из-за / сначала URL-адреса. Поскольку ROOT_DOCUMENT - это что-то вроде /wamp/www/mywebsite

Но когда я его протестировал, он возвращает /wamp/www/images/example.png

И я должен добавить вручную папку моего веб-сайта /mywebsite/images/example.png в относительный путь.

<a href="mywebsite/images/example.png"> Link To Image</a>

И это не полезно из-за изменения имени mywebsite. Итак:

  • Почему возникает эта проблема?
  • Как я могу решить эту проблему?

ОТВЕТЫ

Ответ 1

Вы говорите, что ваш сайт находится в http://localhost/mywebsite, и скажите, что ваше изображение находится внутри подпапки с именем pictures/:

Абсолютный путь

Если вы используете абсолютный путь, / будет указывать на root сайта, а не на корень документа: localhost в вашем случае. Для этого вам нужно указать папку своего документа, чтобы получить доступ к папке с изображениями:

"/mywebsite/pictures/picture.png"

И это будет то же самое, что:

"http://localhost/mywebsite/pictures/picture.png"

Относительный путь

A относительный путь всегда относится к корневому документа , поэтому, если ваш html находится на одном уровне с каталогом, вам нужно будет начать путь непосредственно с именем вашего каталога картинок:

"pictures/picture.png"

Но есть и другие привилегии с относительными путями:

точка-косая черта (./)

Dot (.) указывает на один и тот же каталог, а слэш ( /) предоставляет ему доступ:

Итак, это:

"pictures/picture.png"

Будет такой же:

"./pictures/picture.png"

Двойная точка-косая черта (../)

В этом случае двойная точка (..) указывает на верхний каталог, а также слэш ( /) дает вам доступ к нему. Поэтому, если вы хотите получить доступ к картинке, находящейся в каталоге на один уровень выше текущего каталога вашего документа, ваш URL-адрес будет выглядеть следующим образом:

"../picture.png"

Вы можете поиграть с ними столько, сколько хотите, маленький пример:

Скажем, вы находитесь в каталоге A, и вы хотите получить доступ к каталогу X.

- root
   |- a
      |- A
   |- b
   |- x
      |- X

Ваш URL-адрес будет выглядеть так:

Абсолютный путь

"/x/X/picture.png"

Или:

Относительный путь

"./../x/X/picture.png"

Ответ 2

Самый простой способ решить эту проблему в чистом HTML - это использовать элемент <base href="…"> следующим образом:

<base href="http://localhost/mywebsite/" />

Тогда все URL в вашем HTML могут быть следующими:

<a href="/images/example.png">Link To Image</a>

Просто измените <base href="…"> в соответствии с вашим сервером. Остальные пути HTML просто встанут в линию и будут добавлены к этому.

Ответ 3

Относительный путь основан на уровне документа на стороне клиента, то есть на уровне URL-документа документа, как показано в браузере.

Если URL вашего сайта: http://www.example.com/mywebsite/, то начало с корневого уровня начинается над папкой пути "mywebsite".

Ответ 4

Как насчет пути с двумя косыми чертами вроде этого:

content="//254955-793725-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/09/Chart.png"