Vue.js——如何使用数组中对象数组中的 URL 显示图像？

Question

下午好！

我正在开展一个展示国家公园图像的项目。我调用了 National Parks api 并取回了数据库中所有国家公园的数组。但我正在尝试使用提供的 URL 显示图像，该 URL 当前嵌入在标记为“图像”的对象数组中的对象中。 images-array 这是我在 Vue.js 中的代码：

<template>
  <ul class="list">
    <li v-for="park in parks" :key="park.parkCode" >
      <img :src="park.images[0].url"/>
      <h4>{{park.name}}</h4>
    </li>
  </ul>
</template>

但是每次我运行它，我都会得到这个错误......

渲染错误：“TypeError：无法读取未定义的属性‘url’”

我知道这可能很简单，但我的大脑似乎无法弄清楚。

提前谢谢你！

Answer 1

您应该检查响应。 如果公园对象包括像

{   ...,  "images" : ['image.png','image2.png], ...}

你应该试试park.images[0]

如果看起来像

{   ...,  "images" : [{'url':'image.png'},{'url':'image2.png'}], ...}

应该没问题。