使用 API 不起作用，我在这里做错了什么？答案

【问题标题】：Consuming API not working, what am I doing wrong here?使用 API 不起作用，我在这里做错了什么？
【发布时间】：2021-11-06 11:22:26
【问题描述】：

不确定这里是不是改东西的地方，但是因为你们的cmets，我改了一些东西，我仍然看不到图片，但这里是代码的更新：

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

【问题讨论】：

你的 fetchImages() 返回一个 Promise 你需要使用 then 和 this.images.push(WHAT_YOU_SHOULD_ADD) 类似：axios.get('http://webcode.me').then(resp => { console.log(resp.data); });
图片也是一个对象，不应该是 {{image.WHAT_EVER_PROPERTY}} ？
你的布局中是否也添加了 vue 脚本
是的，我已经添加了 Vue，尝试了一些模拟数据只是为了看看它是否有效！不过谢谢！现在我正在尝试另一件事，但我仍然做错了什么，我可以在 cmets 中发布代码吗？一直在尝试，但它只会以纯文本发送：//

标签： javascript c# html asp.net-core-mvc

【解决方案1】：

你做错了：

创建一个方法 fetchImages 并且永远不要调用它。
this.setState 这个未定义的函数。
this.images = fetchImages() 会导致你进入无限循环，因为这是一个递归函数
在您的html 中使用:src="image.url" 显示图像，但您将数据作为字符串而不是对象获取，您必须使用:src="image"

你可以在这个codeandbox项目中查看解决方案

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>

【讨论】：

谢谢兄弟！很棒的技巧，至少我认为我在 c# 中很不错，但我在 Js 和 axios 以及什么 knox 上很烂，我在看解决方案，我不知道我是智障还是什么，但我无法让它工作......天哪我什至这样做.. 这家伙有一个 Vue.app，我应该把那个代码放到我的 app.js 中吗？
codeandbox项目出了点问题，没有保存我的修改，我重写了代码放在答案里，请检查一下

【解决方案2】：

首先，当你调用fetchImages()时，你需要设置this.images=fetchImages()，这样images的数据就会被设置。如果你想显示图片，你可以这样做：

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

【讨论】：