Web Services Github Pages无法加载我在网站构建后尝试使用jquery获取的图片

dgtucam1  于 2022-11-15  发布在  Git
关注(0)|答案(1)|浏览(120)

第一次发布到堆栈溢出,所以格式可能不稳定:)
主要问题:Github Pages无法加载我在网站构建后尝试使用jquery获取的图片
详细信息:我试图建立一个投资组合网站,页面加载和加载一些纹理和资产(大部分是图像)。它甚至加载了一些我试图在我的问题中得到的图像,但只有当我把它硬编码到我的index.html中时。目前,问题出现在我有一个轮播,我想动态加载图像(jquery脚本进入文件夹并抓取其中的所有图像,然后将其加载到carousel上)。服务器以状态404()响应
/assets/images/常规/: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);
    },
  });
});

我尝试过的事情:
确保路径中的大小写正确(应该正确,因为我已经可以手动加载一些相同的图像)。
尝试添加一个.nojekyll文件[现在已删除](听说可以用于绕过jekyll构建,这将扰乱一些资源和文件夹的加载)。
已尝试更改路径和文件夹结构。
当前文件夹结构:

  • 主文件夹
  • 资产
  • CSS系统
  • 影像
  • 一般情况
  • 此处为images.png
  • 突出显示的项目
  • 此处为images.png
  • 项目
  • 此处为images.png
  • 材质
  • images.png(在显示页面之前加载)
  • 日本
  • HTML语言
  • index.html
  • index.html(调用HTML文件夹中index.html的虚拟文件)[正在正确加载]

这可能与我使用jquery的方式有关,也可能与我在创建并显示主页面后尝试加载图像的事实有关,但我希望能够将这些图像动态加载到carousel中,因为我可以在将来将图像添加到文件夹中,它就会加载。同样,我已经可以手动加载一些图像,因此路径必须正确。我只是不能“t在窗口加载后加载它们。
我试着在谷歌上搜索了几个小时,但没有找到一个和我的问题类似的问题。所以我不得不发布。
感谢阅读!
编辑:忘记在帖子中添加,但是jquery函数中的success函数从来没有被调用过(通过一些测试检查)。另外,我对jquery非常陌生(目前在我的学习列表中),并且从另一个stackoverflow问题中获得了代码,所以我不完全理解这门语言。

ru9i0ody

ru9i0ody1#

404错误可能是因为您的$.ajax()调用使用了指向目录("../assets/images/General")的url选项,而不是返回响应的文件或服务。这也会阻止调用success回调。
我怀疑这是因为你的本地服务器启用了 * 目录索引 *,这意味着对文件夹路径的请求会返回一个指向其内容的链接列表作为响应。Github Pages不是这样配置的,也不会返回目录索引,因此使用此方法阅读文件夹内容将不起作用。See this question,了解有关在Github Pages中生成文件夹内容列表的替代方法的更多讨论。

相关问题