图像不会通过 javascript 加载到 html 页面中答案

【问题标题】：Images wont load in html page via javascript图像不会通过 javascript 加载到 html 页面中
【发布时间】：2014-06-01 18:52:28
【问题描述】：

我有一个图片库 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”中文件夹。

这是我加载页面时得到的

有什么想法吗？

【问题讨论】：

在损坏的图像中，使用inspect元素获取img的实际src，您可以从浏览器中查看src吗？我怀疑src 无效
../img/mcc/xxx.jpg 因为你的js文件不在你的根目录下。
要调试这样的案例，请使用浏览器的“开发人员工具”检查生成的源代码。

标签： javascript html

【解决方案1】：

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

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

【讨论】：

啊，这很有道理。我试图用Java的方式来做。谢谢！
请参阅下面我的答案的更新。这适用于简单的情况，但并不安全。

【解决方案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 ) 构造并没有像您认为的那样做。它迭代对象的 properties，在数组的情况下是无序数组索引，而不是数组值。

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

以这种方式迭代数组不能保证按索引顺序进行。因此，如果您希望图像按照它们在数组中出现的顺序排列，您可能会被烧毁。
for...in 语法迭代数组的所有属性，而不仅仅是数组中的元素。像您在这里拥有的基本数组，没有来自第三方库等的魔法，没有任何额外的属性。但它可能会，然后你的代码就会中断。

迭代数组的正确方法是使用标准的for 循环。见here 上面写着：

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

因为迭代的顺序取决于实现，所以迭代数组可能不会以一致的顺序访问元素。因此，在遍历访问顺序很重要的数组时，最好使用带有数字索引的 for 循环（或 Array.forEach 或非标准 for...of 循环）。

【讨论】：

感谢您在回答中添加其他信息。这是最有帮助的！

【解决方案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">';
}

【讨论】：

【解决方案4】：

使用浏览器随附的开发人员工具进行进一步调查 - 有时路径会因加载 javascript 的文件的 url 而变得混乱。我会将完整的 URL 放入数组中的图片 - 这样就不会混淆。

【讨论】：