Javascript Vue.js从后端返回的图像数组作为对象数组返回到前端

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

我得到了这个错误：GET 127.0.0.1:8887/未定义404（未找到）

前端

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

---

在循环中，您可以

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

更好：

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

---

我尝试了你的答案，但我得到了一个名为GET 127.0.0.1:8887/undefined 404（未找到）的错误。前端现在出问题了吗？@codennewbie123这会将JSON字符串推送到数组中，并再次对数组进行JSON编码。您需要删除循环中的

json_encode

，只需使用

$ret[]=$testdb（注意：这肯定是一个问题，但可能还有其他问题我没有看到）。如果这还不足以让它工作，请向我们展示您的
console.log（res.data）
输出的内容