我有一个问题，我似乎不能显示口袋妖怪图像在我的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;我还附上了前端的屏幕截图。
4条答案
按热度按时间kmpatx3s1#
查看API的文档和JSON文件，我想我找到了你的问题，你用错了img链接，正确的格式是：
https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png例如：
igsr9ssn2#
@erick-silva回答不完整，容易出错。
获取特定口袋妖怪图像的正确方法是：
1.从PokeAPI获取口袋妖怪的信息，比如
bulbasaur。-〉GET https://pokeapi.co/api/v2/pokemon/bulbasaur1.解析返回的JSON属性
.sprites，选择我们想要使用的版本和sprite的种类，比如说 Pokemon Crystal front：.sprites.versions["generation-ii"].crystal.front_default1.使用提供的链接并加载映像：https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/1.png
使用此方法将确保您将始终获取正确的图像的情况下
id的变化或图像的名称不是口袋妖怪的id。iecba09b3#
对于pokeapi，正确的URI格式如下所示。
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