Como usar imagens e bandeiras da API

How to consume images, logos, and flags

A API disponibiliza imagens de times, jogadores, ligas, estadios e bandeiras de paises via URLs publicas. Nao e necessario autenticacao para acessar imagens.

The API provides images of teams, players, leagues, venues and country flags via public URLs. No authentication is needed to access images.

1. Padroes de URL / URL patterns

Tipo / Type URL Pattern Formato / Format
Team logo /football/teams/{id}.png PNG
Player photo /football/players/{id}.png PNG
League badge /football/leagues/{id}.png PNG
Venue photo /football/venues/{id}.png PNG
Country flag /flags/{code}.svg SVG

Base URL: https://football.api.insyde.one

2. Exemplos de uso / Usage examples

HTML:

<!-- Team logo -->
<img src="https://football.api.insyde.one/football/teams/127.png" alt="Flamengo">

<!-- Player photo -->
<img src="https://football.api.insyde.one/football/players/1100.png" alt="Memphis">

<!-- Country flag -->
<img src="https://football.api.insyde.one/flags/br.svg" alt="Brazil">

JavaScript:

const BASE = 'https://football.api.insyde.one';

function teamLogo(id) {
  return `${BASE}/football/teams/${id}.png`;
}

function playerPhoto(id) {
  return `${BASE}/football/players/${id}.png`;
}

function flag(code) {
  return `${BASE}/flags/${code.toLowerCase()}.svg`;
}

3. Tratando imagens ausentes (fallback) / Handling missing images

Nem todos os jogadores e times tem imagem. Use o evento onerror para exibir um placeholder: 

<!-- Inline SVG fallback -->
<img
  src="https://football.api.insyde.one/football/players/99999.png"
  alt="Player"
  onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22><rect fill=%22%23222%22 width=%2248%22 height=%2248%22 rx=%226%22/><text x=%2224%22 y=%2230%22 text-anchor=%22middle%22 fill=%22%23555%22 font-size=%2218%22>?</text></svg>'"
>

JavaScript reusavel / Reusable JavaScript:

function imgWithFallback(src, alt, size = 48) {
  const fallback = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${size} ${size}'><rect fill='%23222' width='${size}' height='${size}' rx='6'/><text x='${size/2}' y='${size/2+6}' text-anchor='middle' fill='%23555' font-size='${size/3}'>?</text></svg>`;
  return `<img src="${src}" alt="${alt}" onerror="this.src='${fallback}'">`;
}
Cache: As imagens sao servidas via CDN com cache longo. Elas raramente mudam, entao podem ser cacheadas no navegador sem problemas.
Cache: Images are served via CDN with long cache. They rarely change, so they can be safely cached in the browser.

4. Encontrar IDs / Finding IDs

Os IDs usados nas URLs de imagem vem dos endpoints da API:

Back to Football API docs