reactjs 无法从www.example.com显示口袋妖怪图像pokeapi.co

hc8w905p  于 2022-12-18  发布在  React
关注(0)|答案(4)|浏览(174)

我有一个问题,我似乎不能显示口袋妖怪图像在我的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;

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

kmpatx3s

kmpatx3s1#

查看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" />
igsr9ssn

igsr9ssn2#

@erick-silva回答不完整,容易出错。
获取特定口袋妖怪图像的正确方法是:
1.从PokeAPI获取口袋妖怪的信息,比如bulbasaur。-〉GET https://pokeapi.co/api/v2/pokemon/bulbasaur
1.解析返回的JSON属性.sprites,选择我们想要使用的版本和sprite的种类,比如说 Pokemon Crystal front.sprites.versions["generation-ii"].crystal.front_default
1.使用提供的链接并加载映像:https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/1.png
使用此方法将确保您将始终获取正确的图像的情况下id的变化或图像的名称不是口袋妖怪的id

iecba09b

iecba09b3#

对于pokeapi,正确的URI格式如下所示。

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

c9x0cxw04#

目前pokemon图像没有加载,因为有从它的github存储库删除。
您可以在PokeAPI GitHub的sprites文件夹中找到图像的真实的位置。
要获得图像,有一个变通方案,
https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg
此处1.svg应替换为pokemon's id
您可以找到更多信息here

相关问题