如何从Javascript数组中提取图像并将其放入HTML？

Question

I have the following array of code containing images and their meta Data. `

const images = [
    {
        "src": "Image1.jpeg",
        "title": "A two tone wall",
        "tags": ["wall", "two tone"]

    },
    {
    "src": "image2.jpeg", 
    "title": "Cute doggy", 
    "tags": ["dog", "walkies"]
},
{
    "src": "image3.jpeg",
    "title": "Natural splendor", 
    "tags": ["natural", "mountain"]
},
{
    "src": "image4.jpeg",
    "title": "Man looking at phone", 
    "tags": ["man", "phone"]
},
{
    "src": "image5.jpeg",
    "title": "Wavey wave",
    "tags": ["water", "wave"]
},
{
    "src": "image6.jpeg",
    "title": "Mountain range",
        "tags": ["mountain", "grass"]
    }

]`

and want to place them into a 2 x 3 Grid with attached meta data. At the moment I have tried parsing them using JQUERY into 2 different rows as objects but only text is showing.

Can anyone help me? I'm pretty new to Javascript but understand the principles.

Answer 1

Like this?

 const cont = document.querySelector(".cont"); const images = [ { "src": "https://picsum.photos/300/200", "title": "A two tone wall", "tags": ["wall", "two tone"] }, { "src": "https://picsum.photos/320/200", "title": "Cute doggy", "tags": ["dog", "walkies"] }, { "src": "https://picsum.photos/330/200", "title": "Natural splendor", "tags": ["natural", "mountain"] }, { "src": "https://picsum.photos/300/210", "title": "Man looking at phone", "tags": ["man", "phone"] }, { "src": "https://picsum.photos/300/220", "title": "Wavey wave", "tags": ["water", "wave"] }, { "src": "https://picsum.photos/300/230", "title": "Mountain range", "tags": ["mountain", "grass"] } ]; images.forEach(function(par){ cont.innerHTML += `<img src="${par.src}" alt="${par.title}">`; }); 

 .cont { display:grid; grid-template-columns:1fr 1fr 1fr; } img { width: 200px; height: 200px; } 

 <div class="cont"></div>