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

Question

我遇到一个问题，我似乎无法在我的 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;

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

Answer 1

查看 API 的文档和 JSON 文件，我想我找到了你的问题。您使用了错误的 img 链接。正确的格式是：https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png

举个例子：

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