Question

我成功地从OpenDota API加载数据但不知何故，图像当我在Heroes.js中传递图像道具时，它会被打破。

这是我加载API的组件。

HeroStats.js

import React, { Component } from 'react'
import Sidebar from "./Sidebar";
import Heroes from "./Heroes"
import "./App.css"
import axios from "axios";

const URL = "https://api.opendota.com/api/heroStats";

class HeroStats extends Component {
    state = {
        data: []
    }

    componentDidMount() {
        axios.get(URL)
            .then(res => {
                this.setState({
                    data: res.data
                });
            });
    }

    render() {
        const Stats = this.state.data.map(stat => (
            <Heroes
                key={stat.id}
                id={stat.id}
                name={stat.name}
                localized_name={stat.localized_name}
                img={stat.img}
                icon={stat.icon}
                pro_win={stat.pro_win}
                pro_pick={stat.pro_pick}
                pro_ban={stat.pro_ban}

            />
        ))
        return (
            <div>
                {Stats}
            </div>
        )
    }
}

export default HeroStats;

在这里我传递道具。的 Heroes.js

import React from 'react'

const Heroes = (props) => (
    <div>

        <h1>{props.localized_name}</h1>
        <img src={props.img} />
        <img src={props.icon} />
        <h1>{props.pro_win}</h1>
        <h1>{props.pro_pick}</h1>
        <h1>{props.pro_ban}</h1>
    </div>

)

export default Heroes;

如果我使用其他标签<h1>{props.img}</h1>，它也会显示图像文件路径。我错过了应该包括的内容吗？

Answer 1

img的值不是您需要执行此操作的完整网址

const Heroes = (props) => (
    <div>

        <h1>{props.localized_name}</h1>
        <img src={"https://api.opendota.com" + props.img} />
        <img src={"https://api.opendota.com" + props.icon} />
        <h1>{props.pro_win}</h1>
        <h1>{props.pro_pick}</h1>
        <h1>{props.pro_ban}</h1>
    </div>

)

无法使用React从API加载图像

1 个答案: