图像文件未通过 jquery ajax 从服务器 cpanel 加载

Question

我不知道这是否是一个重复的问题，但我已经搜索过但找不到解决方案

我是 cpanel 的新手，我最近在其中上传了我的项目。现在我的网站中有一个部分，我正在通过 jquery ajax 加载图像文件夹。现在这在本地服务器 xampp 中运行良好，但在服务器中却没有，它一直给出 404 错误，这意味着文件未被 ajax 脚本发现。出于安全原因，我现在不打算分享 link，但我会解释完整的过程

这些是这些文件夹的位置。这些脚本位于 js 文件夹中。但显然它包含在索引页面中。无论如何让我们移动

var svgFolder = "img/svg/";
var productImagesFolder = "img/ImagesForProducts/";

以下是我用来加载这些文件夹图像的 ajax 脚本

$.ajax({
    url: svgFolder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if (val.match(/\.(jpe?g|svg)$/)) {
                $(".svg-shapesDiv").append("<img src='" + svgFolder + val + "' id='svg-shapes' loading='lazy'>");
            }
        });
    }
});
$.ajax({
    url: productImagesFolder,
    
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if (val.match(/\.(jpe?g|jpg)$/)) {
                $("#avatarlist").append("<img style='cursor:pointer;' class='img-polaroid' src='" + productImagesFolder + val + "' loading='lazy'>");
            }
        });
    }
});

所有这些在本地主机服务器上运行良好，但由于某种原因，当我将它们上传到 cpanel 时它停止工作了。

我试过像这样对 img 标签进行硬编码

<img src='img/svg/file.svg' id='svg-shapes' loading='lazy'>
<img src='img/ImagesForProducts/file.png' id='svg-shapes' loading='lazy'>

我试过的东西

这很好用，所以我认为 ajax 没有计算出地址。我还尝试在浏览器中通过 link 搜索图像，就像这样 domainname.com/img/svg/file.svg 一样，效果也很好。我也试图给 ajax 这样的路径 domainname.com/img/svg/file.svg 但它不起作用。我检查了文件大小写等，但一切都是正确的

如果这是一个愚蠢的问题，那么我很抱歉，但我不知道我做错了什么，我也是 cpanel 和实时托管的新手。

Answer 1

根据对我评论的回复，您的 xampp 似乎默认启用了“索引”。请看这里：https://httpd.apache.org/docs/2.4/mod/mod_autoindex.html

可能在您的共享虚拟主机上它们默认被禁用，您需要为这两个目录启用它们。当您使用 cpanel 时，请参阅此处：https://docs.cpanel.net/cpanel/advanced/indexes/82/ 但这也可以通过将 .htaccess 文件添加到包含 Options +Indexes.

的 2 个文件夹来实现

以这种方式依赖索引的问题是不同的服务器可能 return 略有不同 html 所以你会发现你的 xampp 服务器 returns html 链接（您的 JavaScript 搜索锚标记并从那里获取 href）但共享服务器可能不会 return 链接它可能只是 return 文件名。此外，由于此 html 被 return 编辑，您的 JavaScript 必须解析 html，搜索所有链接并提取 href。因此，我建议编写一个 php 脚本来收集相关文件，并且 return 仅收集 JSON 格式的文件。 JavaScript 更容易解析和使用，现在您可以完全控制 returned 的内容，无论它是在您的 xampp 服务器上还是其他主机上。您可以随意调用此脚本，也可以将其放置在任何您想要的位置。您甚至可以拥有一个脚本，该脚本接受来自您的 AJAX 调用的查询参数，以及它知道要查看哪个文件夹以及必须从该文件夹中收集哪些类型的文件的查询参数。这还有一个好处，就是可以将这些文件夹中的所有其他文件隐藏起来，以免被窥探。

图像文件未通过 jquery ajax 从服务器 cpanel 加载

Image files not loading through jquery ajax from server cpanel

javascript

php

ajax

jquery

cpanel