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

【问题标题】：Trying to fetch image from another image server (akamai) in React.js尝试从 React.js 中的另一个图像服务器（akamai）获取图像
【发布时间】：2018-02-01 02:41:21
【问题描述】：

我在 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？

【问题讨论】：

标签： javascript image reactjs api akamai

【解决方案1】：

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

尝试替换

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

与

<img src={props.avatar}/>

【讨论】：