first time posting to stack overflow so formatting might be wonky :)

Main problem: Github Pages won't load images I try to get using jquery after my website builds

Details: I'm trying to build a portfolio website, the page loads and loads some textures and assets (mostly images) correctly. It even loads some of the images I try to get in my problem but only when I hard code it into my index.html. The problem comes after, currently, I have a carousel that I want to load images into dynamically (jquery script goes to the folder and grabs all the images in it and loads it onto the carousel). But this script keeps failing and I get a (example)"Failed to load resource: the server responded with a status of 404 ()
/assets/images/General/:1" Error.

Note: everything is working correctly on VSCode local server.

Jquery Code (runs correctly locally):

let imgDir = "../assets/images/General/";
$(document).ready(function () {
  $.ajax({
    url: imgDir,
    success: function (data) {
      console.log(data);
      $(data)
        .find("a")
        .attr("href", function (i, val) {
          // Gets all image types
          if (val.match(/\.(jpe?g|png|gif)$/)) {
            // Used to remove the file path to get image name
            let start, end;
            for (let i = val.length - 1; i >= 0; i--) {
              if (!end && val[i] == ".") {
                end = i;
              } else if (!start && val[i] == "/") {
                start = i   1;
              } else if (start && end) {
                break;
              }
            }
            // Creates carousel elements to show images and names
            $(".names-track").append(
              '<li ><h3>'  
                val.slice(start, end).replace(" ", " ")  
                "</h3></li>"
            );
            $(".carousel-track").append(
              ' <li ><img  src="'  
                val  
                '" alt=""/></li>'
            );
            $(".carousel-nav").append(
              '<button ></button>'
            );
          }
        });
      // Builds the carousel with the data
refreshCarousel(document.querySelector(".projects-carousel"));
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      console.log("Status: "   textStatus);
      console.log("Error: "   errorThrown);
    },
  });
});

Things I've tried:

Make sure the case in my path is correct (should be since I can already load some of the same images by hand).

Tried adding a .nojekyll file [now removed] (heard that can be used to bypass jekyll build which would mess up loading of some assets and folders).

Tried changing path and folder structure.

Current folder structure:

• Main Folder
  • assets
    • css
    • images
      • General
        • images.png here
      • Highlighted Projects
        • images.png here
      • Projects
        • images.png here
      • textures
        • images.png (loads before the page is displayed)
    • js
  • HTML
    • index.html
  • index.html (dummy file that calls the index.html in HTML folder) [is loading correctly]

It probably has something to do with how I'm using jquery or the fact that I'm trying to load the images after my main page is built and displayed but I want to be able to load these images into the carousel dynamically since I can just add an image in the folder in the future and it would load. Again I can already load some of the images by hand so the paths have to be correct. I just can't load them after the window loads.

Tried to google for hours but haven't found a question similar to mine. So I had to post.

Thanks For Reading!

Edit: Forgot to add in the post but the success function in the jquery function never gets called (checked through some testing). Also I'm very new to jquery (currently on my list to learn) and got that code from another stackoverflow question so I don't fully understand the language.

CodePudding user response：

The 404 error is probably due to the fact that your $.ajax() call is using a url option that points to a directory ("../assets/images/General"), not a file or service that returns a response. This would also prevent the success callback from being called.

I suspect that this is working locally because your local server has directory indexing enabled. This means that a request to a folder path returns a list of links to its contents in response. Github Pages is not configured this way and doesn't return directory indices, and so reading the folder contents using this method will not work. See this question for more discussion about alternative approaches to generating a list of contents of folders in Github Pages.