github页面赢了我的网站构建后，我尝试使用jQuery的负载图像

Question

第一次发布以堆叠溢出，因此格式化可能很不奇怪:)

主要问题：github页面不会加载图像，我尝试使用jQuery在我的网站构建

详细信息之后：我正在尝试构建一个投资组合网站，页面加载和加载。某些纹理和资产（主要是图像）正确。它甚至加载了一些我试图解决问题的图像，但只有当我将其硬编码为index.html时。问题出现了，目前，我有一个旋转木马，我想动态地加载图像（jQuery脚本转到文件夹并抓住其中的所有图像并将其加载到旋转频率上）。但是这个脚本一直在失败，我得到了一个（示例）“无法加载资源：服务器响应404（）
的状态 /资产/图像/常规/：1英寸错误。

注意：所有内容在VSCODE本地服务器上正常工作。JQuery

代码（本地正确运行）：

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 class="slide-name"><h3>' +
                val.slice(start, end).replace("%20", " ") +
                "</h3></li>"
            );
            $(".carousel-track").append(
              ' <li class="carousel-slide current-slide"><img class="carousel-image" src="' +
                val +
                '" alt=""/></li>'
            );
            $(".carousel-nav").append(
              '<button class="carousel-indicator"></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);
    },
  });
});

我尝试过的事情：

确保我的路径中的情况正确（应该是自我已经可以手工加载一些相同的

）

图像 。

夹结构

• 路径和文件
  • 资产
    • CSS
    • 图像
      • 一般
        • images.png在这里
      • 突出显示项目
        • images.png在这里
      • 项目
        • images.png在这里
      • 纹理
        • images.png（显示页面之前加载）
    • JS
  • html
    • index.html
  • index.html（调用html文件夹中的index.html的虚拟文件）[正在正确加载]

它可能与我使用jQuery或我试图在之后加载图像的事实有关我的主页是建立和显示的，但我希望能够动态地将这些图像加载到轮播中，因为我将来只能在文件夹中添加图像，并且会加载。 同样，我已经可以手动加载一些图像，以便路径必须正确。窗口加载后，我只是无法加载它们。

尝试使用Google几个小时，但没有找到与我的类似的问题。所以我不得不发布。

感谢您的阅读！

编辑：忘了添加帖子，但是jQuery函数中的成功函数永远不会被调用（通过一些测试检查）。 另外，我是JQuery（目前在我的列表中要学习的），并从另一个Stackoverflow问题获得该代码，因此我不完全理解该语言。

Answer 1

404错误可能是由于您的$。ajax（）呼叫使用url选项，指向目录（> ” /images/常规“），而不是返回响应的文件或服务。这也将防止成功回调被调用。

我怀疑这是在本地工作的，因为您的本地服务器已启用了目录索引。这意味着对文件夹路径的请求将返回响应中的链接列表。 GitHub页面没有以这种方式配置，也不会返回目录索引，因此使用此方法读取文件夹内容将不起作用。 请参见此问题有关生成生成的替代方法的更多讨论github页面中文件夹的内容列表。