¿Cómo subir un nivel en la ruta src de una URL en HTML?

101

Estoy almacenando hojas de estilo en {root} / styles mientras que las imágenes están en {root} / images para un sitio web. ¿Cómo doy la ruta en las hojas de estilo para buscar en el directorio de imágenes las imágenes especificadas?

por ejemplo, en background-image: url('/images/bg.png');

html css relative-path

— aateeque
fuente

184

Úselo ..para indicar el directorio principal:

background-image: url('../images/bg.png');

— día solitario
fuente

Lo leí en otra parte también, ¡pero no funciona! (al menos en Chrome)

— aateeque

27

Lo hace. Sin embargo, tenga en cuenta que la ubicación es relativa a la ubicación del archivo CSS, no al documento que incorpora el archivo CSS.

— ThiefMaster

1

@ThiefMaster Debería ser así si solo usamos CSS en línea

— 1000Gbps

57

Aquí está todo lo que necesita saber sobre las rutas de archivo relativas:

Comenzando con / regresa al directorio raíz y comienza allí.
Comenzar con ../ mueve un directorio hacia atrás y comienza allí
Comenzar con ../../ mueve dos directorios hacia atrás y comienza allí (y así sucesivamente ...)
Para avanzar , simplemente comience con el primer subdirectorio y siga avanzando.

¡Haga clic aquí para más detalles!

— S. Akruwala
fuente

52

Utilizar ../:

background-image: url('../images/bg.png');

Puede usar eso tantas veces como desee, por ejemplo, ../../images/o incluso en diferentes posiciones, por ejemplo ../images/../images/../images/(igual que, ../images/por supuesto)

— ThiefMaster
fuente

9

En Chrome, cuando carga un sitio web desde algún servidor HTTP, tanto rutas absolutas (p /images/sth.png. Ej. ) Como rutas relativas a algún directorio de nivel superior (p. Ej.../images/sth.png ).

¡Pero!

Cuando carga (¡en Chrome!) Un documento HTML desde el sistema de archivos local, no puede acceder a los directorios por encima del directorio actual. Es decir, no puede acceder ../something/something.sthy cambiar la ruta relativa a absoluta o cualquier otra cosa no ayudará.

— jaboja
fuente

1

Al volver a verificar, puedo informar que las rutas relativas del sistema de archivos local al usar ../funcionan bien, ¡o al menos funcionan bien en este caso específico!

— aateeque

1

Funciona en linux y windows, no en mac (mi experiencia)

— gabn88

Los enlaces no cuentan aquí, ya que no existe la misma verificación de origen para ellos. Además, esta respuesta tiene 6 años, por lo que los navegadores pueden haber cambiado mucho.

— jaboja

1

Solo estoy confirmando para cualquier otra persona que vea la respuesta

— Ajay

0

Supongamos que tiene la siguiente estructura de archivos:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

En CSS puedes acceder image1, por ejemplo, usando la línea ../images/image1.png.

NOTA : Si está utilizando Chrome, es posible que no funcione y obtendrá un error de que no se pudo encontrar el archivo. Tuve el mismo problema, así que eliminé todo el historial de caché de Chrome y funcionó.

— A.Tressos
fuente

0

Si almacena hojas de estilo / imágenes en una carpeta para que varios sitios web puedan usarlas, o si desea reutilizar los mismos archivos en otro sitio en el mismo servidor, descubrí que mi navegador / Apache no me permite ir a cualquier carpeta principal por encima de la URL raíz del sitio web. Esto parece obvio por razones de seguridad: no se debería poder navegar por el servidor en ningún lugar que no sea las carpetas web especificadas.

P.ej. no funciona: www.mywebsite.com/../images

Como solución alternativa, utilizo Symlinks:

Vaya al directorio de www.mywebsite.com Ejecute el comando ln -s ../images images

Ahora www.mywebsite.com/images apuntará a www.mywebsite.com/../images

— Leendert
fuente