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

Question

我有以下包含图像及其元数据的代码数组。 `

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

]`

并希望将它们放入带有附加元数据的2 x 3网格中。 目前，我尝试使用JQUERY将它们解析为2个不同的行作为对象，但仅显示文本。

谁能帮我？ 我对Java语言还很陌生，但了解一些原理。

Answer 1

像这样？

 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>