folder
Rutas relativas
description
Mismo directorio
<img src="imagen.jpg">
Imagen en la misma carpeta que el HTML
folder_open
Subdirectorio
<img src="imagenes/foto.jpg">
Imagen en una carpeta dentro del directorio actual
arrow_upward
Directorio superior
<img src="../imagen.jpg">
Imagen en la carpeta padre (../ sube un nivel)
lightbulb
Consejo
Usa rutas relativas para imágenes locales. Son más portables y facilitan el desarrollo local.
public
Rutas absolutas
link
URL completa
<img src="https://sitio.com/imagen.jpg">
URL completa que incluye el protocolo y dominio
language
Protocolo relativo
<img src="//sitio.com/imagen.jpg">
Usa el mismo protocolo que la página actual (http/https)
| Característica | Ruta relativa | Ruta absoluta |
|---|---|---|
| Portabilidad | Alta | Baja |
| Dependencia | Estructura de carpetas | Dominio y URL |
| Uso común | Recursos locales | Recursos externos |