来自 Spotify 响应的 React backgroundImage

Question

你好，我是 ReactJs 的初学者:(

所以我想要来自响应的背景图片（来自 Spotify）

我有我想要的所有数据，但没有 BG

我的代码看起来像：

getNowPlaying(){
SpotifyWebApi.getMyCurrentPlaybackState()
.then((Response) => {
  if (Response !== "") {this.setState({
    nowPlaying:{
      name: Response.item.name,
      image: Response.item.album.images[0].url,
      artiste: Response.item.artists[0].name,
      backgroundImage: 'url(Response.item.album.images[0].url)'
    }
    })


  }else{
    alert("Play music !");
    console.log("Play music !")}

})

和

<div className="box1"> 
<img src={ this.state.nowPlaying.image} /> 
</div>

<div className="box2">
<h1>{ this.state.nowPlaying.name} </h1>
<p>{ this.state.nowPlaying.artiste} </p> 
</div>
<div className="background" style={this.state.nowPlaying.backgroundImage}></div>

谢谢:)

Answer 1

要根据 api 响应在 reactJs 中设置背景图片，您应该像这样使用内联样式设置背景图片：

<div 
  className="background" 
  style={{backgroundImage: `url(${this.state.nowPlaying.backgroundImage})`}}
>
...
</div>

来自 Spotify 响应的 React backgroundImage

React backgroundImage from Spotify Response

javascript

spotify

reactjs