无法显示来自 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 link。正确的格式是：https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png

例如：

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

Answer 2

@erick-silva回答不完整，容易出错

获取特定口袋妖怪图像的正确方法是：

从 PokeAPI 获取该 pokemon 的信息，比如 bulbasaur。 -> GET https://pokeapi.co/api/v2/pokemon/bulbasaur
解析返回的 JSON 为属性 .sprites，select 我们想要使用的版本和精灵的多样性，比如说 精灵宝可梦Crystal前:.sprites.versions["generation-ii"].crystal.front_default
使用提供的 link 并加载图像：https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/1.png

如果 id 更改或图像名称不是宠物小精灵的 id，使用此方法将确保您始终获取正确的图像。

Answer 3

对于pokeapi，正确的URI格式如下。

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

无法显示来自 pokeapi.co 的宠物小精灵图像

Unable to display pokemon image from pokeapi.co

reactjs

pokeapi