Question

我在Opendota API中获取了一些数据，我注意到他们用于Steam的用户图像托管在其他地方，它位于akamai服务器上。

这是我在html中打印它的路径

https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/ae/aed0b0fa4bed2039628fe5e95b28de608cfe4359.jpg

这里我加载了我的opendotaAPI以获取有关职业玩家的信息

Players.js

import React, {Component} from 'react';
import axios from "axios";
import Sidebar from "./Sidebar";
import PlayerInfo from "./PlayerInfo"


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




class Players extends Component {    
    state = {
        data:[],
        searchTerm: ""
    }
    componentDidMount() {
        axios.get(URL)
            .then(res => {
                this.setState({
                    data: res.data
                });
            });

    }
    render(){
        const Filter = this.state.data.filter(name =>`${name.personaname}`.toUpperCase()
        .indexOf(this.state.searchTerm.toUpperCase()) >= 0)
        .map(name => 
            <PlayerInfo
            key = {name.account_id}
            {...name}
            />
        )
        return(
            <div>
                 Search: <input style={styleInput}
                        onChange={this.handleSearchTerm}
                        value={this.state.searchTerm}
                        type="text"
                        placeholder="Search player"
                    />
                <div><h1>{Filter}</h1></div>
                </div>
        )
    }
}

export default Players;

这是我传递数据的组件

PlayersInfo.js

import React from 'react'


const PlayerInfo = (props) =>(
    <div>
        <img src={"https://api.opendota.com" + props.avatar}/>
        <h1>{props.personaname}</h1>
        <h1>{props.name}</h1>
        <br />
    </div>

)


export default PlayerInfo;

我也试过这个方法<img src={"https://steamcdn-a.akamaihd.net" + props.avatar}/>结果只是从控制台中断了图像和err_name_not_resolved。

我是否遗漏了某些内容，或者我是否需要为akamai添加API？

Answer 1

API返回avatar属性中图像的完整路径。

尝试替换

<img src={"https://api.opendota.com" + props.avatar}/>

与

<img src={props.avatar}/>

尝试从React.js中的另一个图像服务器（akamai）获取图像

1 个答案: