Search code examples
javascripthtmlcsssassgithub-pages

Problem to show image from a gallery in Github Pages, but in LiveServer extension it works good

I am having problems with the main image of an image gallery in both desktop and mobile views on Github pages. I don't know why the image is not shown, when I open the vs code and use live server I can view it well and everything is correct, but in Github pages it is not seen, and a color change of an element is not shown when doing :hover over it, If anyone could help me I would appreciate it. Thank you very much for reading and have a good day.

this is the repository link in GitHub: https://github.com/Dev-Gus/front-end-challenge1

and this the Github Pages link: https://dev-gus.github.io/front-end-challenge1/

I tried with the code of the respective elements working with the styles or with javascript but nothing worked for me and I didn't know what else to do.

Solution

  • Just fix the URL of images inside your main.js.

    const imgURLs = [
    './images/image-product-1.jpg',
    './images/image-product-2.jpg',
    './images/image-product-3.jpg',
    './images/image-product-4.jpg'
];