Vue.js Array of Images from Backend Returned as Array of Objects to Frontend

Question

My aim is to display an array of images that I saved in the file folder and its directory in the database. Recently, I managed to get the images based from the static directory that I declared at the backend once but now, my problem is displaying multiple images. Here is my code below.

I got this error: GET 127.0.0.1:8887/undefined 404 (Not Found)

Frontend

<template>
<div>
 <q-img
        v-for="(data, index) in base64data"
        :src="'http://127.0.0.1:8887/' + data.daimage"
        :key="index"
        style="width:100px;height:50px"
      />
</div>
</template>

<script>
export default {
methods: {
getTests() {
      axios
        .get("http://localhost/MyComposer/", {
          params: {
            id: 6,
            token: this.token
          }
        })
        .then(res => {
          console.log(res.data);
          for (var i = 0; i < res.data.length; i++) {
            this.base64data.push({
              //image: res.data[i].TestImage,
              daimage: res.data[i].DaImage
            });

            this.dataList.push({
              subjectId: res.data[i].SubjectId,
              question: res.data[i].Question,
              answer: res.data[i].Answer,
              timer: res.data[i].Timer / 60
            });
          }
        });
    }
}
}
</script>

Backend

public function getTest()
    {
        $datab = new ConnectDb;
        $db = $datab->Connect();


        // if (isset($_GET['id']) && $_GET['id'] == 3) {

        //  $db->where('AccessId', $_GET['token']);
        //  $testdb = $db->get('testdetails');
        //  echo json_encode($testdb);
        // }

        if (isset($_GET['id']) && $_GET['id'] == 6) {


            $dir = 'C:\xampp\htdocs\MyComposer\pictures';


            function Get_ImagesToFolder($dir)
            {
                $ImagesArray = [];
                $file_display = ['jpg', 'jpeg', 'png', 'gif'];

                if (file_exists($dir) == false) {
                    return ["Directory \'', $dir, '\' not found!"];
                } else {
                    $dir_contents = scandir($dir);
                    foreach ($dir_contents as $file) {
                        $file_type = pathinfo($file, PATHINFO_EXTENSION);
                        if (in_array($file_type, $file_display) == true) {
                            $ImagesArray[] = $file;
                        }
                    }
                    return $ImagesArray;
                }
            }
            $ImagesA = Get_ImagesToFolder($dir);
           
            $ret = [];
            foreach ($ImagesA as $img) {
                $db->where('AccessId', $_GET['token']);
                $db->where('TestImage', $dir . '\_' . $img);
                $db->where('DaImage', $img);
                $testdb = $db->get('testdetails');
                $ret[] = json_encode($testdb);
            }

            echo json_encode($ret);
        }
    }

Answer 1

In your loop you echo which is immediately returning back the first image and closing out the response. Instead, push the image into an array and then return that:

Bad:

echo json_encode($testdb);

Better:

$ret = [];

foreach ($ImagesA as $img) {
    $db->where('AccessId', $_GET['token']);
    $db->where('TestImage', $dir . '\_' . $img);
    $db->where('DaImage', $img);
    $testdb = $db->get('testdetails');
    $ret[] = $testdb;
}

echo json_encode($ret);