Search code examples
reactjspokeapi

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

Solution

  • 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