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

Question

我正在使用Twitch API，该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

Answer 1

如果该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

以下是格式网址：

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

希望有帮助！