消费 API 不起作用，我在这里做错了什么？

Question

不确定这是否是要更改的地方，但由于您的评论，我更改了一些内容，我仍然看不到图片，但这里是代码的更新：

JS 应用程序：

    import axios from 'axios';
export default {
    name: 'home',
    components: {
        ImageCard
    },
    data() {
        return {
            images: []
        }
    },
    methods: {
        fetchImages = () => {
            axios
                .get("https://foodish-api.herokuapp.com/api/images/pizza")
                .then(res => {
                    console.log(res);
                    this.setState({ images: res.data.message });
                })
                .catch(err => console.log(err));
            this.images = fetchImages()
            });
        }

Index.cshtml 代码在这里：

<div id="app">
<div class="home">
    <li v-for="image in images" :key="image.id">
        <img :src="image.url" :alt="image.alt" />
    </li>
    
</div>

显然这里有问题，但我似乎无法正确理解，因为我看不到图片，这里还有什么问题吗？另外，当您提到我应该做不同的事情时，请指出我正确的代码方向：D

Answer 1

您犯了以下错误：

1. 创建一个方法

   fetchImages

   并且永远不要调用它

2. this.setState

   这是一个未定义的函数

3. this.images = fetchImages()

   会导致无限循环，因为这是一个递归函数
4. 在您的

   html

   中使用

   :src="image.url"

   显示图像，但您获取的数据是字符串而不是对象，您必须使用

   :src="image"

您可以在这个codesandbox项目中查看解决方案

https://codesandbox.io/s/busy-ellis-rcifm?file=/src/App.vue

<template>
  <div id="app">
    <li v-for="image in images" :key="image.id">
      <img :src="image" :alt="image.alt" />
    </li>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      images: [],
    };
  },
  mounted() {
    axios
      .get("https://foodish-api.herokuapp.com/api/images/pizza")
      .then((res) => {
        this.images = res.data;
      })
      .catch((err) => console.log(err));
  },
};
</script>

Answer 2

首先，当你调用

fetchImages()

时，你需要设置

this.images=fetchImages()

，这样

images

的数据就会被设置。如果你想显示图片，你可以这样做：

<li v-for="image in images" :key="image.id">
     <img :src="image.url" :alt="image.alt"/>
</li>