javascript - 尝试在 React.js 中从另一个图像服务器(akamai)获取图像

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 中图像的完整路径属性(property)。

尝试更换

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

与

<img src={props.avatar}/>