Vue.js Vue未从API中找到映像路径

我正在尝试转换10月份CMS中的一些代码，这些代码使用API从数据库中获取图像，然后显示它们。 我可以在10月份的CMS中显示这些图像，但由于某些原因，当我使用Vue时，它找不到路径。它在JSON响应中返回图像细节，但不返回路径

我10月份的代码：

{% set images = __SELF__.images %}
{% if images %}
<div class="row">
    <h2>Latest Images</h2>
</div>
<div class="row">
    <div id="others-images" class="grid">
        {% for image in images %}
            <div class="grid-item other">
                <picture id="image{{ image.id }}">
                    <h1>{{ image.image.path }}</h1>
                    <img src="{{ image.image.path }}" alt="{{ image.description }}">
                </picture>
                <h5>{{ image.name }}</h5>
                <p>{{ image.description }}</p>
            </div>
        {% endfor %}
        <div class="clearfix"></div>
    </div>
</div>
{% endif %}

{%set images=\uuuu SELF\uuuu.images%}
{%if图像%}
最新图片
{%用于图像中的图像%}
{{image.image.path}
{{image.name}
{{image.description}}

{%endfor%}
{%endif%}

（返回的示例路径：http://localhost/bit703/module6/storage/app/uploads/public/60a/9d8/7f9/60a9d87f9cdf5526992530.png)

我在Vue中的代码：

<template>

  <div>
    <ul v-if="images && images.length">
      <li v-for="image of images" :key="image.id">
        <p>{{ image.image.path }}</p>
        <p>{{image.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors" :key="error.id">
        {{error.message}}
      </li>
    </ul>
  </div>

  <!-- <div class="row" v-if="othersImages">
      <h1>There are other images</h1>
      <h1>{{ othersImages }}</h1>
      <div class="card other" v-for="image in othersImages" :key="image.id">
        <h1>Images are displaying</h1>
        <h1>{{ image.filter }}</h1>
        <h1>{{ image.id }}</h1>
        <h1>{{ image.description }}</h1>
              <picture v-bind:id="'image' + image.id">
                  <img v-bind:src="image.image.path"  v-bind:alt="image.description"/>
              </picture>
          <h5>{{ image.name }}</h5>
          <p>{{ image.description }}</p>
      </div>
    <div class="clearfix"></div>
    <h1>There are other images</h1>
  </div> -->
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      images: [],
      errors: [],
    };
  },

  // Fetches posts when the component is created.
  created() {
    axios.get('http://localhost/bit703/module6/api/v1/images')
      .then((response) => {
      // JSON responses are automatically parsed.
        this.images = response.data;
      })
      .catch((e) => {
        this.errors.push(e);
      });
  },
};
</script>

{{image.image.path}

{{image.body}





{{error.message}}


从“axios”导入axios；
导出默认值{
数据（）{
返回{
图像：[]，
错误：[]，
};
},
//创建组件时获取帖子。
创建（）{
axios.get（）http://localhost/bit703/module6/api/v1/images')
。然后（（响应）=>{
//JSON响应会自动解析。
this.images=response.data；
})
.catch（（e）=>{
这个。错误。推（e）；
});
},
};

---

只要我有{{image.image.path}，就不会返回任何内容。是否需要添加一些内容？

尝试console.log API响应。