HTML5の画像配列

Question

オンラインでいくつかの写真を撮りたいのであれば、それらを配列に入れて、私が作っているウェブサイトでそれらを使って、どうやってJavaScriptを使ってやることができますか？

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

ものはいくつかの写真です、私はそれが絵をロードdoesntの場合は、画像の下にALTを持っているキャプション、および場所の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; 
}; 

それは何もロードされませんので、私は何をただわからない、私はここで何かでオフだと仮定しています。任意の助けてください:)

Answer 1

代わりに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>

Answer 2

ループ外に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>

Answer 3

私はあなたがループの外に空の文字列としてmyImageStr宣言する必要がありますね。

var myImageStr = "";このようPlsのは、それを試してみると、これが解決した場合、あなたの問題