CODEWITHSUNDEEP
reactjspokeapi
RMP1992
RMP1992

Reputation: 83

Unable to display pokemon image from pokeapi.co

I am having an issue where I can't seem to be able to display the pokemon images on my react front end, this is the api: https://pokeapi.co/

import React, { Component } from 'react';

class Card extends Component {
    state = {
        name: "",
        imageUrl: "",
        pokemonIndex: "",
    }
    componentDidMount() {
        const {name, url} = this.props;
        const pokemonIndex = url.split('/')[url.split('/').length - 2];
        const imageUrl = `http://pokeapi.co/media/sprites/pokemon/${pokemonIndex}.png`
        this.setState({name, imageUrl, pokemonIndex})
    }
    render() {
        
       
        
        return (
            <div className="card" >
                <img src= {this.state.imageUrl}/>
                <h3> {this.state.name} </h3>
                
            </div>
        );
    }
}

export default Card;

I have also attached a screenshot of the front end.enter image description here

Upvotes: 5

Views: 38201

Answers (5)

al-bulat
al-bulat

Reputation: 186

As another option. If you need pictures not by id, but by name, then this link is available.

const name = 'bulbasaur'; 
`https://img.pokemondb.net/artwork/${name}.jpg`;

https://img.pokemondb.net/artwork/bulbasaur.jpg

Upvotes: 1

Anand Raja
Anand Raja

Reputation: 3126

Currently pokemon images are not loaded as there are deleted from it's github repo.

You can find the real location of the images inside sprites folder in PokeAPI GitHub.

To get the image, there is a workaround,

https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world/1.svg

here 1.svg should be replaced by the pokemon's id

You can find more info here

Upvotes: 3

Istiaque Ahmed
Istiaque Ahmed

Reputation: 9

For pokeapi the correct URI format is as follows.

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/imageName.png

Upvotes: 0

Naramsim
Naramsim

Reputation: 8782

@erick-silva answer is not complete and prone to error.

The correct way to fetch an image for a specific pokemon is:

  1. Fetch from PokeAPI the info for that pokemon, say bulbasaur. -> GET https://pokeapi.co/api/v2/pokemon/bulbasaur
  2. Parse the returned JSON for the property .sprites, select the version we'd like to use and the variety for the sprite, say Pokemon Crystal front: .sprites.versions["generation-ii"].crystal.front_default
  3. Use the provided link and load the image: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/1.png

Using this method will ensure that you will always fetch the correct image in case the ids change or the name of the image isn't the id of the pokemon.

Upvotes: 3

Erick Silva
Erick Silva

Reputation: 343

Looking at the documentation and JSON file from API, I think I found your problem. You are using the wrong img link. The correct format is: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png

For exemple:

<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png" />

Upvotes: 10

Related Questions