Pesquisar por cursos... Pesquisando por Sem resultados para Ver todos os cursos com

Fórum

arrow_back

API

Fabiano Teles

19/05/2022 22:38:19

Olá, ESTOU TENTANDO consumir uma imagem de API porém na hora de renderizar na página vem em código

Icaro Antunes

24/05/2022 13:05:52

Olá, Fabiano. Tudo bem? Então, vamos lá.

Imagino que esteja consumindo uma API por webservice, certo? Vou te passar uma solução por aqui, se estiver usando outra forma de consumo, me avise  também que irei te ajudar.


Então, vou te exemplificar com o o uso da PokeAPI:https://pokeapi.co/

Como você disse, conseguiu retornar em código, mas não a imagem, portanto imagino que você já criou uma fonte de dados por webservice e no link você botou a url a ser consumida.

No meu caso, usei a api do pokemon, e a imagem está dentro de um objeto que vem do retorno na propriedade "sprites" , portanto acesso a imagem que quero que é a "fron_default", que nada mais é do que uma imagem do pokemon pikachu selecionado de frente. Confira a imagem:


Após selecionar o caminho e tudo estar sendo de fato retornado, vamos agora na página criada para mostrar esses dados.

Crie uma nova página e adicione uma grade baseada na fonte de dados em webservice que acabamos de criar.

É exatamente aqui que iremos configurar para vir sua imagem, ao invés do código. Dê um duplo clique na grade.

Vá em colunas e ache a sua propriedade que irá vir da api que é responsável por trazer os dados de imagem. Clique no botão de editar conforme mostrado na imagem.


Note que uma nova janela irá abrir. Vá na seta que está sendo mostrada na imagem e marque "Exibir como imagem"


Pronto, agora é só salvar e executar sua aplicação. Veja como ficou no meu caso:


Caso precise de ajuda com algo mais específico da sua API, basta informar que irei te ajudar.

Bons estudos!