小编RMP*_*992的帖子

无法显示来自 pokeapi.co 的口袋妖怪图像

我遇到一个问题，我似乎无法在我的 React 前端显示神奇宝贝图像，这是 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;

Run Code Online (Sandbox Code Playgroud)

我还附上了前端的屏幕截图。