notas - Ruta relativa en HTML

insertar imagen html5 (3)

Estoy creando un sitio web en localhost . Quiero hacer todos los recursos de enlaces en mi sitio web a la ruta relativa (me refiero solo a recursos internos).

sitio web se encuentra en

http://localhost/mywebsite

Leí esta pregunta útil Absoluta frente a las URL relativas .

Encontré diferencias entre /images/example.png e images/example.png

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

La ruta relativa anterior debe devolver ROOT_DOCUMENT/images/example.png debido a / al principio de url. Como ROOT_DOCUMENT es algo como /wamp/www/mywebsite

Pero cuando lo probé, solo devuelve /wamp/www/images/example.png

Y debo agregar manualmente la carpeta de mi sitio web /mywebsite/images/example.png a la ruta relativa.

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

Y no es útil debido a cambiar el nombre de mywebsite. Asi que:

¿Por qué ocurre este problema?
¿Como puedo resolver este problema?

La forma más fácil de resolver esto en HTML puro es usar el elemento <base href="…"> así:

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

Entonces todas las URL en tu HTML pueden ser esto:

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

Simplemente cambie <base href="…"> para que coincida con su servidor. El resto de las rutas HTML simplemente se alinearán y se agregarán a eso.

La ruta relativa se basa en el nivel de documento del lado del cliente, es decir, el nivel de URL del documento como se ve en el navegador.

Si la URL de su sitio web es: http://www.example.com/mywebsite/ , el inicio en el nivel raíz comienza por encima de la ruta de la carpeta "mywebsite".

Usted dice que su sitio web está en http://localhost/mywebsite , y digamos que su imagen está dentro de una subcarpeta llamada pictures/ :

Camino absoluto

Si usa una ruta absoluta , / apuntaría a la raíz del sitio , no a la raíz del documento: localhost en su caso. Es por eso que necesita especificar la carpeta de su documento para acceder a la carpeta de imágenes:

"/mywebsite/pictures/picture.png"

Y sería lo mismo que:

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

Camino relativo

Una ruta relativa siempre es relativa a la raíz del documento , por lo que si su html está en el mismo nivel del directorio, deberá iniciar la ruta directamente con el nombre del directorio de su imagen:

"pictures/picture.png"

Pero hay otros beneficios con caminos relativos:

barra de puntos ( ./ )

El punto ( . ) Apunta al mismo directorio y la barra ( / ) le da acceso :

Así que esto:

"pictures/picture.png"

Sería lo mismo que esto:

"./pictures/picture.png"

Doble barra de puntos ( ../ )

En este caso, un punto doble ( .. ) apunta al directorio superior y, de igual manera, la barra ( / ) le da acceso a él. Entonces, si desea acceder a una imagen que se encuentra en un directorio un nivel por encima del directorio actual que es su documento, su URL se vería así:

"../picture.png"

Puedes jugar con ellos todo lo que quieras, un pequeño ejemplo sería este:

Digamos que usted está en el directorio A , y desea acceder al directorio X

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

Tu URL se vería bien:

Camino absoluto

"/x/X/picture.png"

Camino relativo

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