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

Question

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

这是我在 html

中打印时的路径

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

这是我加载 opendota 的地方API 以获取有关职业玩家的信息

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 returns avatar 属性中图像的完整路径。

正在尝试更换

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

与

<img src={props.avatar}/>

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

Trying to fetch image from another image server (akamai) in React.js

javascript

api

image

akamai

reactjs