使用jQuery Ajax加载文件夹图片时抛出404错误求助

我太懂这种明明文件就在那，Ajax却报404的憋屈感了！咱们一步步拆解问题，找到根源：

最可能的原因：服务器没开启目录浏览功能 #

你能直接访问单个图片，不代表服务器允许列出文件夹里的内容。Ajax请求images/本质是让服务器返回这个文件夹的索引页面（比如自动生成的HTML列表），如果服务器没开启目录浏览，就会直接返回404。

• 如果你用Apache：需要在.htaccess或者服务器配置里加Options +Indexes
• 如果你用Nginx：在对应的server块里加上autoindex on;
• 本地开发的话，用Live Server、XAMPP这类工具，默认一般会开启目录浏览

第二坑：路径没写对 #

别小看相对路径的坑！你的folder = "images/"是相对于当前HTML文件的位置，不是JS文件的位置。比如：

• 如果HTML在网站根目录，JS在js/文件夹，那路径是对的
• 如果HTML在pages/子目录，那得写成../images/才能回到根目录找图片文件夹

保险起见，直接用绝对路径试试，比如var folder = "/images/";（前提是images文件夹在网站根目录）

第三坑：本地打开HTML文件（file://协议）的限制 #

如果你是直接双击HTML文件打开（地址栏是file://开头），浏览器的安全策略会禁止Ajax请求本地文件夹。这时候必须用HTTP服务器来运行你的项目，比如VS Code的Live Server插件、XAMPP、WAMP都行。

给你调整后的代码（加了错误排查） #

我给你的代码补了错误回调，能在控制台看到具体错误信息，还优化了图片匹配和路径拼接：

$(document).ready(function () {
  // 建议先用绝对路径测试
  var folder = "/images/"; 
  $.ajax({
    url: folder,
    success: function (data) {
      // 遍历目录列表里的所有链接
      $(data).find("a").each(function() {
        var imgPath = $(this).attr("href");
        // 忽略大小写匹配图片格式
        if (imgPath.match(/\.(jpe?g|png|gif)$/i)) {
          // 拼接完整路径，避免相对路径出错
          var fullImgUrl = folder + imgPath;
          $('#galerie').append(`
            <a class="image_anchor" data-fancybox="gallery" href="${fullImgUrl}">
              <img src="${fullImgUrl}" alt="Gallery Image">
            </a>
          `);
        }
      });
    },
    // 新增错误回调，方便排查问题
    error: function(xhr, status, error) {
      console.log("请求出错啦：", status, "-", error);
      console.log("服务器返回的内容：", xhr.responseText);
    }
  });
});

最后再检查这几点 #

1. 文件夹名称有没有拼写错误？比如是不是Images/（首字母大写）而你写的是images/？
2. 文件夹里有没有.htaccess这类文件限制了访问？
3. 浏览器控制台里的Network面板，看看请求的URL是不是你预期的地址，响应状态码到底是啥？

内容的提问来源于stack exchange，提问作者anon