Image not display when call an API with Axios

Viewed 340

I want to ask some question and need solved a problem. So about couple weeks ago I start little project for study and trying use React Native for android called Pokemon because I'm still beginner. For now I can render all pokemon names. The problem is I can't render the image from API pokemon because the image in the name/id API and when I want get the image from API always get error request failed with status error code 404

import React, { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView, View, Text, Image, FlatList, ScrollView} from 'react-native';
import Axios from 'axios';

function PokemonTesting() {
    const [pokeName, setpokeName] = React.useState();

    const [images , setImages] = React.useState({
      imag: ""
    })
    
    const [id, setId] = React.useState(1)

    React.useEffect(() => {
      Axios
      .get(`https://pokeapi.co/api/v2/pokemon/`)
      .then (res => {
        console.log(res.data.results);
          setpokeName(res.data.results)
      })
      .catch(err =>{
          console.log(err);
      })
    }, [setpokeName])

    const namepokemonid = () => {
      <FlatList 
      data = {pokeName}
      keyExtractor = {(item, index) => {
        return index.toString()
      }} 
      renderItem = {({ item }) => {
      //  console.log("item", item)
       return(
        <Text>{item.name}</Text>
        )
        }} />
    } 

    React.useEffect(() => {
        Axios
        .get(`https://pokeapi.co/api/v2/pokemon/${namepokemonid}/`)
        .then (res => {
            console.log(res.data.species.name);
            setImages({
              imag: res.data.species.name
            })
        })
        .catch(err =>{
            console.log(err)
        })
    }, [setImages])



  return (

    <SafeAreaView>
      <FlatList 
      data = {pokeName}
      keyExtractor = {(item, index) => {
        return index.toString()
      }} 
      renderItem = {({ item }) => {
      //  console.log("item", item)
       return(
        <Text>{item.name}</Text>
        )
        }} />
         <Image
         style = {styles.pic} 
         source={{uri:images}} />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create ({
    item: {
        padding : 10,
        fontSize : 20,
        height: 44
    },
    pic: {
        width : 50,
        height : 50
    }
})

export default PokemonTesting

Thanks

1 Answers

It looks like all the png images are stored inside sprites nested object. I checked a sample id ivysaur using https://pokeapi.co/api/v2/pokemon/ivysaur url. Images are stored in res.data.sprites. (Check the image below)

enter image description here

Use one of them as your preference.

Related