如何从reactjs中的json响应字段加载图像

Posted 2021-04-03

我正在使用Twitch API，它提供了一个API调用，它响应图像和游戏名称。我想在下面显示图像和游戏名称，但是图片没有加载：

PicsNotLoading：

 render() {
    const { game } = this.props

    return (
      <div className="GameImage">
          <img src= {game.box_art_url} alt=""/>
          <p>{game.name} </p>
      </div>
    )
  }
}

export default GameImage

答案

如果URL有效，您的代码将起作用，但您使用的图像是404ing。我根本不熟悉Twitch API，但是看看documentation，你似乎需要在路径中替换{width}和{height}参数。

您可以在有效负载中更清楚地看到这一点，因为URL不像浏览器404请求时那样编码。

{
  "data":
  [{
     "id": "493057",
     "name": "PLAYERUNKNOWN'S BATTLEGROUNDS",
     "box_art_url": "https://static-cdn.jtvnw.net/ttv-boxart/PLAYERUNKNOWN%27S%20BATTLEGROUNDS-{width}x{height}.jpg"
  }]
}

这就是你可以实现这样的方法，将width方法中的height和formatImageUrl变量替换为你想要的高度和宽度，它将生成一个有效的URL。

class GameImage extends React.Component

 formatImageUrl(url) {
    const width = '400'
    const height = '400'

    return url.replace('{width}', width).replace('{height}', height)
 }

 render() {
    const { game } = this.props

    return (
      <div className="GameImage">
          <img src={this.formatImageUrl(game.box_art_url)} alt=""/>
          <p>{game.name} </p>
      </div>
    )
  }
}

export default GameImage

这是格式化的URL：

https://static-cdn.jtvnw.net/ttv-boxart/PLAYERUNKNOWN%27S%20BATTLEGROUNDS-400x400.jpg

希望有所帮助！