Question

我有一个图片库html页面，其中包含一个从javascript文件中填充的div。

这是html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Gallery</title>
</head>
<body>

<div id="example"></div>


<script src="js/gallery.js"></script>

</body>
</html>

这是gallery.js文件

var images = [ "img/mccc/001.jpg", "img/mccc/002.jpg", "img/mccc/003.jpg",
    "img/mccc/004.jpg", "img/mccc/005.jpg", "img/mccc/006.jpg",
    "img/mccc/007.jpg", "img/mccc/008.jpg", "img/mccc/009.jpg",
    "img/mccc/010.jpg", "img/mccc/011.jpg", "img/mccc/012.jpg",
    "img/mccc/013.jpg", "img/mccc/014.jpg", "img/mccc/015.jpg",
    "img/mccc/016.jpg", "img/mccc/017.jpg", "img/mccc/018.jpg",
    "img/mccc/019.jpg", "img/mccc/020.jpg", "img/mccc/021.jpg",
    "img/mccc/022.jpg", "img/mccc/023.jpg", "img/mccc/024.jpg",
    "img/mccc/025.jpg" ];

var code = "";

for ( var i in images) {
    code += '<img src="' + i + '" alt="image not available">';
}

document.getElementById("example").innerHTML = code;

包含'mccc'文件夹的'img'文件夹与我的gallery.html和'js'文件夹位于同一目录中，是的，名为001.jpg-025.jpg的图像位于'mccc'中文件夹中。

这是我加载页面时得到的内容

enter image description here

有什么想法吗？

Answer 1

使用for (var i in images)时，i成为索引，而不是元素本身。试试：

for (var i in images) {
    code += '<img src="' + images[i] + '" alt="image not available">';
}

Answer 2

改变这个：

for ( var i in images) {
   code += '<img src="' + i + '" alt="image not available">';
}

对此：

for ( var i = 0; i < images.length; i++) {
   code += '<img src="' + images[i] + '" alt="image not available">';
}

for ( var foo in bar )构造不符合您的想法。它迭代对象的属性，在数组的情况下，它是无序的数组索引，而不是数组值。

注意：有几个答案建议您保留for...in语法并正确索引数组。这可能适用于基本情况，但不建议这样做有两个原因：

以这种方式处理数组并不保证按索引顺序排列。因此，如果您希望图像的顺序与它们在阵列中出现的顺序相同，则可能会被烧毁。
for...in语法迭代数组的所有属性，而不仅仅是数组中的元素。像你这样的基本数组，没有来自第三方库等的魔法......，没有任何其他属性。但它可能，然后你的代码就会崩溃。

迭代数组的正确方法是使用标准for循环。请参阅here，其中包含：

for..in不应该用于迭代索引顺序很重要的数组。数组索引只是具有整数名称的可枚举属性，并且与一般对象属性相同。无法保证for ... in将以任何特定顺序返回索引，并且它将返回所有可枚举属性，包括具有非整数名称和继承的属性。

因为迭代的顺序是依赖于实现的，所以迭代数组可能不会以一致的顺序访问元素。因此，当迭代访问顺序很重要的数组时，最好使用带有数字索引的for循环（或者Array.forEach或非循环的for ...）。

Answer 3

只需改变：

for ( var i in images) {
    code += '<img src="' + i + '" alt="image not available">';
}

到

for ( var i in images) {
    code += '<img src="' + images[i] + '" alt="image not available">';
}

Answer 4

使用浏览器附带的开发人员工具进一步调查 - 有时路径会变得混乱，具体取决于加载javascript的文件的url。我会将完整的URL放在数组中的图片中 - 这样就不会产生混淆。

图像不会通过JavaScript加载到HTML页面

4 个答案: