зацикливание массива URL изображений

Question

эй, ребята, я использую API для получения данных json, но у используемого API не было никаких изображений, поэтому я добавил их в папку, и я пытаюсь вставить их в свой тег img без создания нового тега img для каждого. сейчас, когда загружается html, он получает только [0] из моего массива. Я хочу, чтобы он go через массив и использовать каждый из них для MOV ie

const getMovieData = asyn c () => {

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

]