代码适用于localhost但不适用于实时服务器

Question

我的代码在localhost上运行得很好。但是，当我在我的实时服务器上复制并粘贴完全相同的代码时，我收到以下错误消息：无法加载资源：服务器响应状态为404（）。我检查了我的文件夹路径，看起来对我来说是正确的。我不知道这里有什么问题。

var folder = "image/";
$(document).ready(function () {
    $.ajax({
        url: folder,
        success: function (data) {
         console.log("successful load")
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                      theImageList.push(folder + val );
            };
        })
            left_show_image(theImageList[shuffledComparison[0][0]],window.innerWidth/10*4.88, screen.width/3, "left")
            right_show_image(theImageList[shuffledComparison[0][1]],window.innerWidth/10*4.88, screen.width/3, "right")\
        },
        error: function(){
            alert("cannot read your folder")
        }
    })
})

这对我来说真的很困惑，我很感激任何建议。

Answer 1

在虚拟或根目录下部署网站时，在javascript中使用相对路径可能会导致404错误。

image文件夹应该与虚拟目录或根目录一起使用。您为应用程序路径提供变量，例如appUrl。

var appUrl ='localhost或live server root folder'

var folder = appUrl +“/ image”;

Answer 2

您需要修复文件夹路径。尝试在图像之前添加斜杠：

var folder = "/image/";

要么

var folder = "~/image/";

也将它放在document.ready函数内

$(document).ready(function () {
 var folder = "/image/";
    $.ajax({
        url: folder,
        success: function (data) {
        console.log("successful load")
        $(data).find("a").attr("href", function (i, val) {
            if (val.match(/\.(jpe?g|png|gif)$/)) {
                  theImageList.push(folder + val );
        };
    })
        left_show_image(theImageList[shuffledComparison[0]
[0]],window.innerWidth/10*4.88, screen.width/3, "left")
        right_show_image(theImageList[shuffledComparison[0]
[1]],window.innerWidth/10*4.88, screen.width/3, "right")\
    },
    error: function(){
        alert("cannot read your folder")
    }
}) 
})

这将使用基本URL，然后搜索图像文件夹，以便它应该适用于本地主机和服务器。此外，请确保已将图像文件夹上载到服务器