HTML5中的圖像數組

所以，如果我想在網上抓取幾張圖片，將它們放入一個數組中並在網站上使用它們，我正在使用Javascript怎麼做。HTML5中的圖像數組

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"} 
];

這些都是一些圖片，我有一個標題有畫面下，中高音如果它不加載圖片，以及位置的URL。

容器我至今是：

window.onload = function(){ 
    var imageContainer = document.querySelector("#image"); 

    for(var i=0; i < images.length; i++){ 
    var myImageStr += "<img alt='" + images[i].alt + "'" + 
        " src='" + images[i].url + "' />"; 

    imageContainer.innerHTML = myImageStr; 
};

這不加載任何東西，所以我假定我的東西我在這裏下車，只是不知道是什麼。任何幫助請:)

來源

2017-03-04 Gian Nobilione

是否有瀏覽器控制檯的任何消息？ – NineBerry

不，只是一個標題說「圖像陣列」 –

不是丟棄一個靜態字符串到DOM的，我建議你同時使用createElement()和appendChild()功能。它看起來更清晰。

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"}], 
 

 
    parent = document.getElementById('box'); 
 
    window.onload = function() { 
 
     images.forEach(function(v) { 
 
     var img = document.createElement("img"); 
 
     img.src = v.url; 
 
     img.alt = v.alt; 
 
     box.appendChild(img); 
 
     }) 
 
    }

<div id='box'></div>

來源

2017-03-04 20:21:57

這工作:)非常感謝你。確切地說，我正在尋找 –

您需要聲明myImageStr變量在循環外。

此外，在構建字符串後，請設置imageContainer HTML。

像這樣：

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 imageContainer = document.querySelector("#image"); 
 
    var myImageStr = ""; 
 
    for(var i=0; i < images.length; i++){ 
 
     myImageStr += "<img alt='" + images[i].alt + "'" + " src='" + images[i].url + "' />"; 
 
     // Adding Caption (you may need to wrap the image and the caption into a container) 
 
     // myImageStr += "<caption align='bottom'>"+images[i].caption+"</caption>" 
 

 
     // Each image on its own line. 
 
     // myImageStr += "<br>"; 
 
     
 
    } 
 
    imageContainer.innerHTML = myImageStr; 
 
}

<div id="image"></div>

來源

2017-03-04 20:21:48 Titus

是的這工作:)它唯一缺少的是標題和每一張圖片將被打印在一個新的行 –

@GianNobilione我已經添加了一些評論，說明你怎麼可能添加標題並將其設置在自己的行上。 – Titus

非常感謝你的幫助:) –

我想你應該聲明myImageStr作爲環外一個空字符串。像這樣var myImageStr = "";

請給它一個嘗試，並告訴我們，如果這個解決您的問題

來源

2017-03-04 20:23:59

它確實謝謝你:) –

HTML5中的圖像數組

回答

相關問題