arrays - 循环图像网址数组

Question

嘿伙计们，我正在使用 api 来取回 json 数据，但我使用的 api 没有任何图像，所以我将它们全部添加到一个文件夹中，并且我试图将它们插入到我的 img 标签中，而不为每个图像制作一个新的 img 标签。现在，当 html 加载时，它只从我的数组中获取 [0]。我希望它通过数组并将每个用于相应的电影

常量 getMovieData = async () => {

let url = 'https://ghibliapi.herokuapp.com/films';
await fetch(url)
    .then(response => response.json())
    .then(data => { 
        root.innerHTML = listOfData(data)
    })


function listOfData(films) {
     const Info = films.map(film => `<li id="movie" class="card">


     <img class="images" src ="${imgs[0]}"/>

     <h2 class="card-title">${film.title}</h2>
     <p class="card-info">Director: ${film.director} , Score: ${film.rt_score}</p>
     <p class= "description">${film.description}</p>

     </li>
     `).join("\n");

     return Info


}

}

这是我的 imgs 数组

>let imgs = [


"/img/Castle_in_the_Sky_(1986).png",
"/img/Grave_of_the_Fireflies_Japanese_poster.jpg",
"/img/My_Neighbor_Totoro_-_Tonari_no_Totoro_(Movie_Poster).jpg",
"/img/Kiki's_Delivery_Service_(Movie).jpg",
"/img/OYpost.jpg",
"/img/Porco_Rosso_(Movie_Poster).jpg",
"/img/Pompokoposter.jpg",
"/img/Whisper_of_the_Heart_(Movie_Poster).jpg",
"/img/Princess_Mononoke_Japanese_poster.png",
"/img/My_Neighbors_the_Yamadas_(1999).jpg",
"/img/Spirited_Away_Japanese_poster.png",
"/img/Cat_Returns.jpg",
"/img/Howls-moving-castleposter.jpg",
"/img/Gedo6sn.jpg",
"/img/Ponyo_(2008).png",
"/img/Karigurashi_no_Arrietty_poster.png",
"/img/From_Up_on_Poppy_Hill.png",
"/img/Kaze_Tachinu_poster.jpg",
"/img/The_Tale_of_the_Princess_Kaguya_(poster).jpg",
"/img/When_Marnie_Was_There.png",

]

标签： arraysimageurl