Javascript 为什么我的Vue.js Nuxt应用程序中没有定义我的图像请求

我不明白为什么我的nuxt应用程序没有从我的数据库中提取图像。我有一个列表组件和单独的列表项组件，它们在我的项目列表中迭代项目

我可以将所有其他数据（如项目名称、摘要）毫无疑问地提取出来，但尽管我在Strapi数据库中为每个项目添加了图像，但我似乎无法获取数据。我运行了一个GraphQL查询来双重检查JSON数据，以确认图像已附加到项目，例如：

 {
    "id": "2",
    "Name": "Kīpuka",
    "image": [
      {
        "url": "/uploads/190217_KIPUKA_Editorial_Mockup_paas_e2e1316f4c.jpeg"
      }
    ]
  },

我正试图像这样把这些图片拉到我的应用程序中；我正在尝试绑定图像源，以便为每个项目显示相应的图像

  <ul :key="project.id">
   <img class="hover-preview" :src="'https://localhost:1337/' + project.image.url" alt="">
   </ul>

---

我不知道为什么它找不到url，因为它是使用“project.image.url”传递的。我查看了关于堆栈溢出的其他问题，但我找不到解决我问题的答案，任何帮助都将非常感谢，因为我已经在这方面遇到了困难，无法继续。JSON中的图像是一组图像。要获取第一个图像，必须使用

project.image[0].url

我甚至会添加一个函数来为您构建url，而不是在模板中连接字符串。 例如：

 {
    "id": "2",
    "Name": "Kīpuka",
    "image": [
      {
        "url": "/uploads/190217_KIPUKA_Editorial_Mockup_paas_e2e1316f4c.jpeg"
      }
    ]
  },

在模板中：

<ul :key="project.id">
  <img class="hover-preview" :src="buildImageUrl(project.image[0].url)" alt="">
</ul>

编辑： 更新了你的代码沙盒。这里有很多值得回忆的地方。仔细看看我是如何处理您的JSON的，并将其与您最初的codesandbox进行比较。

---

请记住，您选择的giphy链接不是实际的.gif URL。右键单击gif并复制其实际地址。URL必须以

.gif

结尾感谢您的回复，我尝试过这样做，但不幸的是每次都收到一个“无法读取属性”URL“未定义”错误您是否使用v-for来迭代您的数据？你的例子没有说明这一点。如果可能的话，你能用你的例子创建一个代码沙盒吗？不必完全连接到API。只需将示例JSON作为数据输入即可。但它在调试问题方面有很大帮助。我曾尝试设置一个代码沙盒，向您展示我的列表/组件是如何设置的，尽管我无法让它读取任何本地JSON数据，但它应该向您展示我正在尝试的结构。这是我第一次使用codesandbox和vue.js，因此对这些问题表示歉意，并非常感谢您迄今为止的所有帮助。我没有检查图像数组是否为null，因此如果数据库条目没有附加图像，它将在迭代过程中对数据库项抛出未定义的异常。确保数据库项目有条目，并在代码中添加空检查，解决了这一问题。