Unable to display pokemon image from pokeapi.co

Question

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.

Does this answer your question? [Third party image acces issue 403 error](https://stackoverflow.com/questions/11503374/third-party-image-acces-issue-403-error) — Joe, Sep 19 '21 at 01:00

score 8 · Accepted Answer · answered Sep 19 '21 at 03:26

8

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" />

answered Sep 19 '21 at 03:26

Erick Silva

338
1
5

where did you find this link? I couldn't find it anywhere on the documentation. – RMP1992 Sep 19 '21 at 09:44
@RMP1992 I opened the json file and searched for png, then I tested the links to find the correct one – Erick Silva Sep 19 '21 at 14:52

score 2 · Answer 2 · answered Feb 24 '22 at 10:48

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

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

Fetch from PokeAPI the info for that pokemon, say bulbasaur. -> GET https://pokeapi.co/api/v2/pokemon/bulbasaur
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
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.

score 1 · Answer 3 · answered Dec 16 '22 at 17:53

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/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg

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

You can find more info here

score 0 · Answer 4 · edited Mar 29 '22 at 07:40

0

For pokeapi the correct URI format is as follows.

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

edited Mar 29 '22 at 07:40

Dharman

30,962
25
85
135

answered Mar 29 '22 at 05:33

Istiaque Ahmed

9
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 29 '22 at 05:59

Unable to display pokemon image from pokeapi.co

4 Answers4