来自后端的 Vue.js 图像数组作为对象数组返回到前​​端

Question

我的目标是显示我保存在文件夹中的一组图像及其在数据库中的目录。最近，我设法从我在后端声明的静态目录中获取图像，但现在，我的问题是显示多个图像。下面是我的代码。

我收到此错误：GET 127.0.0.1:8887/undefined 404 (Not Found)

前端

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

后台

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

在您的循环中，echo 会立即返回第一张图像并关闭响应。相反，将图像推送到数组中，然后返回：

不好：

echo json_encode($testdb);

更好：

$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);