圖片不會通過javascript載入html頁面

Question

我有一個圖庫html頁面，其中包含一個div，該div從javascript文件填充。

這是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”文件夾中。

這是我加載頁面時得到的

在此處輸入圖片說明

有任何想法嗎？

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循環。 看到這里說：

for..in不應用於遍歷索引順序很重要的Array。 數組索引只是具有整數名稱的可枚舉屬性，其他方面與常規Object屬性相同。 無法保證for ... in將以任何特定順序返回索引，並且將返回所有可枚舉的屬性，包括具有非整數名稱的屬性和被繼承的屬性。

因為迭代的順序取決於實現，所以在數組上進行迭代可能不會以一致的順序訪問元素。 因此，在訪問順序很重要的數組上進行迭代時，最好使用帶有數字索引的for循環（或Array.forEach或非標准的for ... of循環）。

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放入數組中的圖片-這樣就不會造成混亂。

圖片不會通過javascript載入html頁面

問題描述

4 個解決方案

解決方案1
4 2014-06-01 18:55:28

解決方案2
3 已采納 2014-06-01 18:56:06

解決方案3
3 2014-06-01 18:56:28

解決方案4
1 2014-06-01 18:56:53

圖片不會通過javascript載入html頁面

問題描述

4 個解決方案

解決方案1 4 2014-06-01 18:55:28

解決方案2 3 已采納 2014-06-01 18:56:06

解決方案3 3 2014-06-01 18:56:28

解決方案4 1 2014-06-01 18:56:53

解決方案1
4 2014-06-01 18:55:28

解決方案2
3 已采納 2014-06-01 18:56:06

解決方案3
3 2014-06-01 18:56:28

解決方案4
1 2014-06-01 18:56:53