我在 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 次迭代。
你想要i < images.length
您当前正在访问 undefined
的 .url (不存在的索引的默认值)
关于javascript - 来自 JS for 循环的图像不会在 HTML 上加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49604254/