0

Construí mi primera galería de imágenes en HTML,CSS y JavaScript. El código podéis verlo en el siguiente repositorio:

Todo funciona bien de manera local (en el live server de Visual Studio Code en un sistema operativo Windows) pero a la hora de subirlo a GitHub y desplegarlo en GitHub Pages las imágenes no cargan cuando se le da clic, como deberían.

Éste es el enlace a la página en GitHub Pages:

Sé que el error debe estar en la línea 12 del archivo app.js. Intente colocar el "./", "../", "/.", pero nada ha funcionado:

Captura de pantalla de la imagen en local

Funcionamiento Local ☝🏻

En Git Hub Pages 👇🏻

Captura de pantalla de la imagen en GitHub Pages

Errores que aparecen al darle clic en GitHub Pages 👇🏻

Error en la consola de JavaScript en GitHub Pages

El error debe estar ahí, ¿no?

Captura de pantalla del código fuente

2
  • 1
    ¿Podrías compartir el código? Nos vendría bien conocer el repositorio github y el enlace de github pages para poder ver qué está pasando. el 26 abr. a las 9:33
  • Ya he encontrado el problema. Según parece estás usando Windows para desarrollar la página (mala idea), por lo que no has sido consciente de que no coinciden las mayúsculas/minúsculas de las rutas. Te mando petición de mezcla y redacto respuesta. el 26 abr. a las 9:44

1 respuesta 1

0

El problema que estás sufriendo es debido a que no coinciden las mayúsculas/minúsculas de la imagen que deseas mostrar.

En un sistema operativo insensible a ellas, como Windows, la página web se mostrará correctamente, pero en cualquier otro sistema operativo (AIX, Linux, MacOS, FreeBSD, etc) no se encontrará el archivo.

Esta es la línea del script:

images.forEach((img, index) => {
    img.addEventListener('click', () => {
        openModal(`./images/img${index}.jpg`) // <-- Aquí está la errata
    })
})

La imagen está localizada en Images/img2.jpg.

Te he enviado una petición de mezcla para corregir la ruta en el código:

El cambio consiste en esta diferencia:

- openModal(`./images/img${index}.jpg`)
+ openModal(`Images/img${index}.jpg`)
1
  • 1
    ¡Era exactamente eso, tendré en cuenta esto para futuros proyectos, muchas gracias, Oscar!
    – ZASKE
    el 26 abr. a las 18:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.