1
resposta

[Duvida] Imagem não é exibida no front do Alugames

Caros, gostaria de pedir um apoio para que as imagens da API seja exebidas no front conforme atividade do curso.

Eu consegui gerar o json correntamente, conforme abaixo, no entanto, as imagns não são exebidas. Alguma ideia do que pode ser?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

[ { "titulo": "Resident Evil Village", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/1196590/header.jpg?t=1687764412" }, { "titulo": "Resident Evil Village", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/1196590/header.jpg?t=1687764412" }, { "titulo": "Resident Evil Village", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/1196590/header.jpg?t=1687764412" }, { "titulo": "Cyberpunk 2077", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg?t=1687178759" }, { "titulo": "God of War", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/1593500/header.jpg?t=1650554420" }, { "titulo": "Dandara", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/612390/header.jpg?t=1674055293" }, { "titulo": "The Elder Scrolls V: Skyrim", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/72850/header.jpg?t=1647357402" }, { "titulo": "Marvel's Spider-Man", "capa": "https://cdn.cloudflare.steamstatic.com/steam/apps/1817070/header.jpg?t=1673999865" } ]

1 resposta

Olá, Vitor.

Tudo bem?

Sem ver o código fica um pouco mais difícil, porém podemos verificar alguns pontos importantes:

  1. URLs das Imagens: Certifique-se de que as URLs das imagens estão corretas e acessíveis. Você pode testar copiando e colando cada URL diretamente no navegador para ver se a imagem é carregada.

  2. CORS (Cross-Origin Resource Sharing): Algumas vezes, o problema pode estar relacionado a políticas de CORS. Se o servidor onde as imagens estão hospedadas não permite o acesso de outros domínios, as imagens não serão carregadas. Nesse caso, você pode tentar usar um serviço de proxy ou hospedar as imagens em um servidor que permita CORS.

  3. Estrutura do JSON: A estrutura do JSON parece estar correta, mas vamos garantir que o front-end esteja interpretando o JSON corretamente. Certifique-se de que o código do front-end está buscando o campo "capa" para exibir as imagens.

Aqui está um exemplo de como você pode verificar se o JSON está sendo interpretado corretamente no front-end (em JavaScript):

fetch('URL_DO_SEU_JSON')
  .then(response => response.json())
  .then(data => {
    data.forEach(jogo => {
      const img = document.createElement('img');
      img.src = jogo.capa;
      document.body.appendChild(img);
    });
  })
  .catch(error => console.error('Erro ao carregar o JSON:', error));
  1. Console do Navegador: Verifique o console do navegador (pressione F12 e vá para a aba "Console") para ver se há algum erro sendo exibido. Isso pode ajudar a encontrar a causa do errado.

Se todos os pontos acima estiverem corretos e ainda assim as imagens não forem exibidas, por favor, compartilhe mais detalhes sobre como o front-end está implementado para que possamos investigar mais a fundo. Pode colar o seu código aqui.

Espero ter ajudado e bons estudos!