Vue Приложение с использованием данных API (Не удалось загрузить ресурс: сервер ответил со статусом 404 (Не найдено)) - PullRequest
Новая
       44

Vue Приложение с использованием данных API (Не удалось загрузить ресурс: сервер ответил со статусом 404 (Не найдено))

0 голосов
/ 27 января 2020

В настоящее время я создаю свое первое Vue приложение с использованием этого API-интерфейса College Football: https://api.collegefootballdata.com/teams Мне удалось получить некоторые данные для отображения в моем компоненте (название команды, талисман , et c) с топором ios, но когда я хочу отобразить lo go команд, консоль выдает мне следующую ошибку: Не удалось загрузить ресурс: сервер ответил со статусом 404 ( Не найдено) .

Это вывод

enter image description here

Это мой ax ios запрос к API 

<script>
import axios from "axios";
export default {
name: "Equipos",
 data() {
  return {
      teams: [],
      search: ""
   };
 },
  created: function() {
      axios.get("https://api.collegefootballdata.com/teams").then(res => {
      this.teams = res.data;
   });
 }
 };
 </script>

Это компонент карт для отображения данных каждой команды 

<template>
 <div>
<div class="justify-center flex wx-30 mt-8">
  <input class="rounded p-2" v-model="search" type="text" placeholder="Search..." />
  <button
    class="bg-grey-500 rounded w-auto flex justify-end items-center p-2 hover:text-blue-light"
  >
    <i class="fas fa-search text-red-500"></i>
  </button>
</div>

<div id="equipos" class="flex flex-wrap justify-center mt-10">
  <div
    class="w-56 h-auto shadow-sm block bg-white rounded-lg m-4"
    v-for="team in filteredTeams"
    v-bind:key="team.school"
  >
    <div class="px-6 py-4">
      <button class="hover:text-red-600 text-red-400 py-2 px-3 my-3">
        <i class="fas fa-heart"></i>
      </button>




      //here's the problem
      <img class="h-16 w-16 rounded-full mx-auto"  :src="team.logos">

      <h4 class="font-bold text-grey-700 text-lg mb-2">{{ team.school }}</h4>
      <h4 class="font-bold text-grey-700 text-lg mb-2">{{ team.abbreviation }}</h4>
      <p class="text-gray-700 text-base">Mascota: {{ team.mascot }}</p>
      <p>Color: {{ team.color }}</p>

    </div>
  </div>
</div>

Полагаю, это проблема с источником img, но я попытался получить URL lo go, чтобы узнать, связано ли это с COORS, но я получаю следующее: enter image description here

...