使用Javascript遍历并显示指定文件夹内的所有图片

前置依赖 #

• 你使用的这套方案依赖web服务器开启img目录的目录浏览功能，如果该功能未开启，请求img/路径会返回403/404错误，不会返回包含文件列表的HTML，方案本身无法生效。

原有代码问题说明 #

1. 第一版基础代码的核心逻辑是符合需求的，但缺少路径拼接处理，很容易出现相对路径错误导致图片加载失败
2. 你后续修改时添加的for循环逻辑是错误的，会导致每一张匹配到的图片都重复插入20次，不符合遍历所有图片的需求

修正后可用代码 #

<div id="img"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var folder = "img/";

$.ajax({
    url: folder,
    success: function (data) {
        // 遍历目录页所有a标签
        $(data).find("a").each(function () {
            const imgFileName = $(this).attr("href");
            // 匹配图片后缀，忽略大小写适配大写后缀的图片
            if (imgFileName.match(/\.(jpe?g|png|gif)$/i)) {
                // 拼接正确的图片相对路径
                const imgSrc = folder + imgFileName;
                $("#img").append(`<img src="${imgSrc}" alt="加载的图片">`);
            }
        });
    },
    // 新增错误回调方便调试定位问题
    error: function (err) {
        console.error("目录请求失败，请检查目录浏览权限是否开启：", err.status);
    }
});
</script>

问题排查步骤 #

如果代码运行后还是没有显示图片，可以按以下步骤排查：

• 打开浏览器开发者工具的「网络」面板，查看img/路径的请求是否成功，返回内容是否包含所有图片对应的a标签
• 查看生成的<img>标签的src属性值是否正确，直接访问该路径确认是否可以正常加载图片
• 如果服务器未开启目录浏览功能，无法通过前端解析目录页的方式实现该需求，需要后端提供接口返回img目录下的所有图片文件名列表

内容的提问来源于stack exchange，提问作者Vincent Van Klaus