Trying to loop through array of images from server using vanilla javascript's fetch and display in modal

Goal is to click on a "show more link" and a modal opens with multiple images of the project and a description. the difficulty I'm having is getting more than one image to show. the images are in a mysql database and are selected by php then encoded into json. I then use javascript to fetch and clone everything related to the project. (Note: I don't have any errors popping up on any of the code, it just only shows one image.)

image of database for image file names

I've tried viewing all of the image_file_names using console.log and am only getting 1. I'm posting my whole function here for showing the thumbnails as well as the "detailed project description". I'm also having trouble with next and previous buttons, but I'll take that after I get this working. Any insight would be greatly appriciated

function showPortItems(project){ //CLONES THE TEMPLATE AND INSERTS THE ITEMS


 let clonePortItem = portfolioItemTemplate.cloneNode(true);
 let imageCountInProject = project.count_image_in_project;
 let idOfProject = project.id_port_proj;


 if(imageCountInProject == 1)
 {
    clonePortItem.querySelector('img.thumbnailImg').src = imageLinkBase + imageThumbBase + project.img_file_name;
    clonePortItem.querySelector('.nameOfProject').textContent = project.proj_title;
    clonePortItem.querySelector('h4').textContent = project.port_cat_name;
    clonePortItem.querySelector('a.thumbLinkId').id = project.project_id_name + project.id_port_proj;

const project_id = clonePortItem.querySelectorAll('.viewMoreLink');

for (let i = 0; i < project_id.length; i++)
{
    project_id[i].addEventListener('click', function(openEvent)
    {
      openEvent.preventDefault();
      portfolioProjectItem.classList.remove('displayNone');
      showDetails(project, idOfProject);
    });
  }

  let prevLink = document.querySelector('a.prevLink');
  let nextLink = document.querySelector('a.nextLink');
  let index = 0;

  prevLink.addEventListener('click', function(prevEvent)
  {
    prevEvent.preventDefault();

    if(index > 0 )
    {
        index--;
        portfolioProjectItem.classList.remove('displayNone');
    }

  });

  nextLink.addEventListener('click', function(nextEvent)
  {
    nextEvent.preventDefault();

     if(index < idOfProject.length - 1)
    {
        index++;
        portfolioProjectItem.classList.remove('displayNone');
    }
    console.debug;
  });


  let closeLink = document.querySelector('a.closeLink');
  closeLink.addEventListener('click', function(closeEvent)
  { 
    closeEvent.preventDefault();
    portfolioProjectItem.classList.add('displayNone');
  });


    mainPortfolioSection.appendChild(clonePortItem);
}


 }
   function showDetails(project) 
 {

  console.log(project);
  console.log(project.img_file_name);
  let fkPortProjId = project.fk_port_proj_id;
  let idOfProject = project.id_port_proj;


    let images = [project.img_file_name];
    for (let i = 0; i < images.length; i++)
    {
      console.log(images);
      if(idOfProject === fkPortProjId)
      {
      portfolioProjectItem.querySelector('.projectImages').src = imageLinkBase + imageLargeBase + images[i];
      }
    }



  portfolioProjectItem.querySelector(".descriptionTitle").textContent = project.proj_title;
  portfolioProjectItem.querySelector(".descriptionBrief").textContent = project.des_brief;
  portfolioProjectItem.querySelector(".descriptionSteps").textContent = project.des_steps;
  portfolioProjectItem.querySelector(".descriptionConclusion").textContent = project.des_conclusion;
  portfolioProjectItem.querySelector(".disclaimerText").textContent = project.disclaimer_rights;

  portfolioProjectItem.classList.remove('displayNone');


}

HTML

<div id="descriptionModal" class="displayNone">
            <h2 class="descriptionTitle"><span>Title:</span></h2>
            <div class="descriptionContainer">
                <div class="imagesLeft slider-inner">
                    <div class="descriptionImg slider">
                        <img class="slide projectImages" src="" alt="">
                        <img class="slide projectImages" src="" alt="">
                        <img class="slide projectImages" src="" alt="">
                        <img class="slide projectImages" src="" alt="">
                    </div>
                    <a href="#" class="arrow-left"></a>
                    <a href="#" class="arrow-right"></a>
                    <div class="dots-wrapper"></div>
                </div>
                <div class="descriptionRight">
                    <div class="descriptionBrief descriptionText"></div>
                    <div class="descriptionSteps descriptionText"></div>
                    <div class="descriptionConclusion descriptionText"></div>
                    <div class="disclaimerText"></div>
                </div>
            </div>
            <div class="linksAndBack">
                <a class="closeLink" href="#"><span class="fas fa-times"></span> Close</a>
                <a class="prevLink" href="#"><span class="fas fa-angle-left"></span> Previous</a>
                <a class="nextLink" href="#">Next <span class="fas fa-angle-right"></span></a>
            </div>
        </div>