Javascript 来自JS for循环的图像不会加载到HTML上

我有一个JS格式的图像数组，需要包含在HTML中。这是我的数组和JS代码：

// Data for the "HTML Images" Page

var images = [
    {caption: "Red Slate Mountain", alt: "Mountain", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"},
    {caption: "St. Petersburg River", alt: "River", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"},
    {caption: "Lybian Desert", alt: "Desert", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Libyan_Desert_-_2006.jpg/320px-Libyan_Desert_-_2006.jpg"},
    {caption: "Azerbaijan Forest", alt: "Forest", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Azerbaijan_forest_3.JPG/320px-Azerbaijan_forest_3.JPG"},
    {caption: "Indonesian Jungle", alt: "Jungle", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Indonesian_jungle3%2C_Zoo_Prague.jpg/320px-Indonesian_jungle3%2C_Zoo_Prague.jpg"}
];

window.onload = function(){
    var figure = "<figure>";
    for(var i = 0; i <= images.length; i++){
        figure += '<img src="'+ images[i].url + '" ' + 'alt="' + images[i].alt + '">' 
        + '<figcaption>' + images[i].caption + "</figcaption>"   
    }figure += "</figure>";

    var myContainer = document.querySelector("#image").innerHTML = figure;
}

这是HTML容器：

<section class="main center">

            <h2>HTML Images</h2>
            <a href="https://ict.senecacollege.ca/" target="_blank">
                <img src="assignment3/img/ict.png">
            </a>
            <h2>Scenes</h2>
            <div id="image"></div>

    </section>

---

但是这一页是空白的。我假设问题是我的连接，但我找不到错误。

数组“图像”中有5项。你的循环从0开始，一直到5，包括6次迭代

你想要我

---

您当前正在访问不存在的索引的未定义默认值的.url

数组“images”中有5项。你的循环从0开始，一直到5，包括6次迭代

你想要我

---

您当前正在访问一个不存在的索引的未定义默认值的.url

由于等号的原因，您的迭代次数超过了需要的次数，导致了一个错误。长度为6的数组的最后一个元素为5。

由于等号的原因，您的迭代次数超过了需要的次数，这会导致错误。长度为6的数组的最后一个元素为5。

您也可以将数组转换为字符串：

const figure = images.reduce(
  (all,image)=>
    all + '<img src="'+ image.url + '" ' + 'alt="' + image.alt + '">' 
    + '<figcaption>' + image.caption + "</figcaption>",
  "<figure>"//initial value
) + "</figure>";

您还可以将数组转换为字符串：

const figure = images.reduce(
  (all,image)=>
    all + '<img src="'+ image.url + '" ' + 'alt="' + image.alt + '">' 
    + '<figcaption>' + image.caption + "</figcaption>",
  "<figure>"//initial value
) + "</figure>";

---

我在哪里访问未定义的.url？谢谢你。我消除了我的错误。我已经接受了你的回答，如果你认为我的问题问得很好，你能给我一票吗？我在哪里访问未定义的.url？谢谢你。我消除了我的错误。我已经接受了你的回答，如果你认为我的问题问得很好，你能给我一张赞成票吗？正如有人提到的，控制台非常有用。如果您的代码停止工作，但屏幕上没有显示损坏的指示，则通常会在控制台中发现错误。在大多数浏览器上使用f12进入开发者模式，正如有人提到的，控制台非常有用。如果您的代码停止工作，但屏幕上没有显示损坏的指示，则通常会在控制台中发现错误。在大多数浏览器上使用f12进入开发者模式