调用API加载图片失败，Vue+axios+Index.cshtml代码问题排查求助

JS应用代码问题 #

• 第11行：methods内方法定义语法错误，同时箭头函数会导致this指向异常，将fetchImages = () => {修改为fetchImages() {
• 第21行：存在多余的闭合符号});，直接删除该行
• 第16行：误用React的setStateAPI，Vue直接修改data属性即可，将this.setState({ images: res.data.message });修改为this.images = res.data.message
• 第20行：错误的递归调用+异步返回值处理错误，this.images = fetchImages()整行删除，同时需要在mounted钩子中主动调用this.fetchImages()触发接口请求
• 可优化点：建议先打印res.data确认接口返回结构，避免字段取值错误，若接口返回的图片数据为字符串数组，后续模板不需要取.url属性

Index.cshtml代码问题 #

• 第3行：li标签必须包裹在ul/ol标签内，在li外层新增<ul>标签，闭合标签放在li集合结束处
• 第3行：v-for绑定的key错误，若images是字符串数组没有id属性，修改为v-for="(image, index) in images" :key="index"
• 第4行：img的src绑定错误，若image本身是图片url字符串，修改为:src="image"，alt属性可以直接写固定文本或者省略动态绑定
• 第7行：缺少#app对应div的闭合标签，在末尾新增</div>

修正后参考代码 #

JS应用代码

import axios from 'axios';
export default {
    name: 'home',
    components: {
        ImageCard
    },
    data() {
        return {
            images: []
        }
    },
    mounted() {
        // 页面挂载时触发接口请求
        this.fetchImages()
    },
    methods: {
        fetchImages() {
            axios
                .get("https://foodish-api.herokuapp.com/api/images/pizza")
                .then(res => {
                    // 此处可根据实际返回结构调整取值逻辑
                    this.images = res.data.message
                })
                .catch(err => console.log(err))
        }
    }
}

Index.cshtml代码

<div id="app">
  <div class="home">
    <ul>
      <li v-for="(image, index) in images" :key="index">
          <img :src="image" alt="披萨图片" />
      </li>
    </ul>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Mangaz