为什么我的 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}`
}

编辑： 更新了您的代码框。这里有很多值得回忆的地方。仔细看看我是如何处理您的 JSON 的，并将其与您的初始代码框进行比较。 https://codesandbox.io/s/jovial-montalcini-nmmv3?file=/src/components/ProjectItem.vue

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