从e文件夹加载图像并将其显示在html中

loading images from e folder and display them in html

本文关键字：显示 html 文件夹 加载 图像      更新时间：2023-09-26

大家好，通过使用以下代码，我正在尝试从文件夹中读取所有图像，然后将它们显示在我的html文件中。问题是如何查看/petch/文件夹中的/images/文件夹。当显示图像时，加载方式为/petch/frame_1.jpg，而不是/petch/images/frame_1.jpg，因此在这种情况下，为了显示它们，我必须使用两倍的图像集。一个在image文件夹中，一个在fetch文件夹中。有人能向我解释一下为什么会这样吗？

<body>
        <script type="text/javascript">
            var dir = "/fetch/images/";
            var fileExtension = ".jpg";
            $.ajax({
                url: dir,
                success: function (data) {
                    $(data).find("a:contains(" + fileExtension + ")").each(function () {
                        var fileName = this.href.replace(window.location.host, "").replace("http://", "");
                        $("body").append("<img src='"+ fileName + "'>");
                        console.log(fileName);
                    });
                }
            });
        </script>
    </body>

两个更改给我带来了图像。1） 从var目录中删除正斜杠/反斜杠。2） 组合目录和文件名。

以下是适用于我的代码：

<body>
    <script type="text/javascript">
        var dir = "fetch/images/";
        var fileExtension = ".jpg";
        $.ajax({
            url: dir,
            success: function (data) {
                $(data).find("a:contains(" + fileExtension + ")").each(function () {
                    var fn = this.href.replace(/^.*['''/]/, '');
                    var fileName = dir + fn;
                    $("body").append("<img src='"+ fileName + "'>");
                    console.log(fileName);
                });
            }
        });
    </script>
</body>
相关文章：