Convenciones de ruta de imagen CSS
Este artículo es una guía sobre cómo vincular otros archivos, como imágenes en su hoja de estilo o archivo CSS, y cuáles son las mejores formas de especificar las rutas de los archivos.
Descripción general de las rutas de archivo
Una ruta de archivo identifica la ubicación de un archivo dentro de la jerarquía de carpetas de un sitio web. Al hacer referencia a archivos externos, rutas de archivos como:
- una página web
- Imágenes
- Secuencias de comandos de Java
Hay dos tipos de Caminos:
- Ruta absoluta
- Ruta relativa
Ruta absoluta con ejemplo
Una ruta absoluta es una ruta de archivo que muestra la URL completa del archivo, independientemente de dónde se encuentre el archivo actual. Por ejemplo:
background-image: url(https://www.exampleSite.com/images/image1.png);
Ruta relativa con ejemplos
Una ruta relativa es una ruta de archivo que muestra la ruta del archivo para la carpeta actual. Por ejemplo:
background-image: url(/images/image1.png);
Está en la carpeta imágenes del directorio raíz del sitio web actual. Considere otro ejemplo:
background-image: url(images/image1.png);
Es una ruta de image1,, ubicada en la carpeta images presente en la carpeta actual.
background-image: url(../images/image1.png);
Es una ruta de image1,, ubicada en la carpeta images presente en un directorio anterior al directorio actual. Tenga en cuenta que ../ significa un nivel por encima del directorio actual. Cuanto más desee subir en la jerarquía de directorios; puedes usar más ../.
Mejores prácticas para especificar la ruta
La mejor práctica para especificar la ruta del archivo es a través de la ruta relativa. El uso de rutas de archivo relativas no vinculará sus páginas web a su URL base actual. En su lugar, todos los enlaces funcionarán en su computadora personal (localhost) y en cualquier futuro dominio público que cree.
Por lo tanto, siempre se recomienda tener mucho cuidado al especificar las rutas de archivo en las páginas HTML y CSS de su sitio web y proporcionar las rutas para que no necesite cambiarlas en el futuro cuando cambie su URL base.