Programe mi pagina web desde el live server de Visual Studio Code y todo funciona perfecto, pero resulta que la abri directamente desde l...

Javier Andres Laverde Pico

Javier Andres Laverde Pico

Pregunta
student
hace 4 años

Programe mi pagina web desde el live server de Visual Studio Code y todo funciona perfecto, pero resulta que la abri directamente desde la carpeta y no cargan las imagenes, y tambien lo subi a github, y no cargan las imagenes, pero lo subi exactamente como lo tengo en el computador y exactamente como lo abro en Live serve, alguien sabe que puede ser?, simplemente no encuentra las imagenes pero estan en el lugar correcto y bien enrutadas o sino no se abririan bien en el live server Ayuda 😦

Screenshot_1.png Screenshot_2.png

6 respuestas
para escribir tu comentario
    Javier Andres Laverde Pico

    Javier Andres Laverde Pico

    student
    hace 4 años

    Hola Retax :) Ya descubrí que estaba mal :) Resulta que la mayoría de las rutas no tenían el punto, solo tenia el "/" y no tenían el "./" simplemente le añadí el . a todas las rutas y funciono Gracias buen hombre!

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacher
    hace 4 años

    En teoría así está bien, si subes tu sitio a un servidor, este servidor va a tomar como carpeta raíz la carpeta de tu proyecto y todo va a funcionar, realmente es raro que abras un sitio web directamente clicando sobre el HTML jaja, usualmente se usan servidores (como LiveServer) así que así está bien (por ahora), porque la mejor práctica por cuestiones de SEO es siempre poner rutas absolutas 👀

    Javier Andres Laverde Pico

    Javier Andres Laverde Pico

    student
    hace 4 años

    GUAU! Y entonces como debo enrutar las imagenes?

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacher
    hace 4 años

    Es porque estás usando

    ./
    al inicio de cada ruta.

    Ese

    ./
    significa tu directorio raíz, el inicio de tu directorio, por ponerlo así, es el directorio más grande, el que contiene todo.

    Cuando tú lo ejecutas con LiveServer, esta extensión usa como directorio raíz el directorio de tu proyecto, es decir, LiveServer no conoce ningún otro directorio más atrás del directorio de tu proyecto, por lo que

    ./
    está apuntando al directorio de tu proyecto, y todo funciona bien.

    Cuando tú lo abres directamente con el archivo, tu directorio raíz cambia, porque tu proyecto está guardado dentro de varias carpetas, al abrirlo en el navegador directamente tu directorio raíz va a ser el directorio raíz de tu sistema operativo (el disco

    C:\
    ), por tanto, HTML va a empezar a buscar las carpetas y todo ello desde ahí, y no las va a encontrar, por eso no te carga ninguna imagen ni nada :D

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacher
    hace 4 años

    ¿Cómo tienes escritas las rutas de tus imágenes? 🤔

Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.

Curso de Responsive Design: Maquetación Mobile First
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.