我试着在这里寻找不同的答案，但无法解决我的问题。我有一个JSON服务器，其中有一些数据：

file.json
    {
      "post": [
        {
          "id": "1",
          "title": "Title",
          "description": "Este e um post para saberes mais clica aqui",
          "article": "Hoje este e um novo post etc e tal",
          "photo": "image-1.jpg"
        },
        ]
    }

我希望我的组件在v-for中渲染'photo'上的图像，因为我不想每次添加新图像时都硬编码。这是我在组件中的内容。vue：

<template>
  <section>
    <h2 class="mt-32 flex justify-center text-3xl ">The Happy Algorithm</h2>
    <div class="grid grid-rows-4 grid-flow-col">
      <div class="ml-12 " v-for="(post, index) in posts" :key="index">
        <router-link :to="{ name: 'post', params: { id: post.id } }">
          <a href=""
            ><img
              class=" mt-8 pt-32 "
              :src="`../assets/${post.photo}`"
              :alt="post.title"
          /></a>
          <h2>{{ post.title }}</h2>
          <p class="text-justify text-sm pt-6">
            {{ post.description }}
          </p>
        </router-link>
      </div>
    </div>
  </section>
</template>
<script>
import { api } from "@/../services.js";

export default {
  name: "LatestPost",
  props: ["id"],
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    getAllPosts() {
      this.posts = [];
      api.get(`/post`).then(response => {
        this.posts = response.data;
        console.log(this.posts);
      });
    },
  },
  created() {
    this.getAllPosts();
  },
};
</script>

我已经测试过添加一个在线图像，而不是我在我的资产和工程绝对罚款，所以我不知道为什么不工作时，我试图从资产加载图像。
这就是它的显示方式