时间戳

首页 > 解决方案 > 我正在尝试将本地服务器上的图像显示到 Web 浏览器，但它不起作用

javascript - 我正在尝试将本地服务器上的图像显示到 Web 浏览器，但它不起作用

问题描述

这是我的 JSON 文件：myjson.json

{
    "events" : [
        { "location" : "San Francisco, CA", "date" : "May 1", "map" :"JSON/num1.jpg"},
        { "location" : "Austin , TX", "date" : "May 15", "map" :"JSON/num2.jpg"},
        { "location" : "New York , NY", "date" : "May 30", "map" :"JSON/num3.jpg"}
    ]
}

这是我的主文件：P1.html

<!DOCTYPE html>
<html>

<body>
    <h2>JSON User Account Example</h2>

    <script>
        var xhr = new XMLHttpRequest();

        xhr.onload = function () {
            console.log("xhr.status: " + xhr.status);
            if (xhr.status === 200) {
                responseObj = JSON.parse(xhr.responseText);
                var newContent = '';
                var i;
                for (i = 0; i < responseObj.events.length; i++) {
                    newContent += '<div class="event">';
                    newContent += '<img src="' + responseObj.events[i].map + '"';
                    newContent += 'alt="' + responseObj.events[i].location + '" />';
                    newContent += '<p><b>' + responseObj.events[i].location + '</b><br>';
                    newContent += responseObj.events[i].date + '</p>';
                    newContent += '</div>';
                }
                document.getElementById("myuser").innerHTML = newContent;
            }
        };

        xhr.open("GET", "JSON/myjson.json", true);
        xhr.send(null);
    </script>
    <div id="myuser"></div>
</body>

</html>

当我运行代码时，唯一显示的是除此之外的标题，什么都没有。我想不通。JSON 文件与 html 文件位于同一文件夹中。我不明白为什么它不显示在网络浏览器上。

我将文件夹名称更改为 JSON 以使其更简单，并应用了所有人指出的所有更改。所有文件都在同一个文件夹和服务器中，但它仍然不加载图像。沮丧的。

所以我只是在浏览器中检查了开发人员工具，这就是我得到的：

从源“null”访问“file:///C:/Users/OneDrive/Desktop/Stack/2021/JSON/myjson.json”的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http，数据，铬，铬扩展，勇敢，铬不受信任，https。

标签： javascripthtmlcssjsonfrontend

解决方案

如评论中所述，更新 json 数据以对图像使用正斜杠。与下面的路径相同xhr.open。

还需要将 open 和 send语句移到..onload

// code deleted.

推荐阅读