为什么在我的Vue.js Nuxt应用中，我的图片请求没有定义？

Question

我不明白为什么我的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>

图片无法加载，网络窗口显示请求未定义。

 "Request URL:https://localhost:1337/undefined"

我不知道为什么它找不到url，因为它是用 "project.image.url "传递的，我看了一下Stack Overflow上的其他问题，但我找不到一个似乎能解决我的问题的答案，任何帮助都将是非常感激的，因为我在这个问题上碰了壁，无法进步。

Answer 1

image 在你的JSON中是一个图片数组。为了得到第一张图片，你必须使用 project.image[0].url.

我甚至会在你的模板中添加一个函数来为你构造该url，而不是连接字符串.例如。

在你的模板中:

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

在你的方法中:

buildImageUrl(image) {
  if (!image) return "path/to/fallback/image.jpg";
  return `https://localhost:1337/${image}`
}

EDIT:更新了你的codesandbox. 这里需要回忆的东西很多。仔细看看我是如何处理你的JSON的，并与你最初的codesandbox进行比较。https:/codesandbox.iosjovial-montalcini-nmmv3?file=srccomponentsProjectItem.vue。

请记住，你选择的giphy链接不是实际的.gif网址。右键点击gif并复制它的实际地址，URL必须以以下方式结束 .gif.