javascript - 背景图像不会出现在反应音频播放器中

Question

我正在尝试将 SoundCloud 音频播放器添加到我的网站。我正在使用 react-soundplayer，我可以从 SoundCloud 正确获取音乐，但不会出现播放器的样式/背景图像。

我尝试使用不同的图像来查看图像是否是问题，但是，它不是。我还尝试将播放器创建为不同文件中的单独组件，然后将其导入到我的索引中，遗憾的是这也没有成功。

const Player = withSoundCloudAudio(props => {
    let { track, duration, currentTime } = props;

    return (
    <div className="py2 white bg-cover bg-top rounded relative" style={{backgroundImage: `url(${GODbg})`}}>
        <div className="bg-black absolute top-0 right-0 left-0 bottom-0 muted" />
            <div className="center py4 relative z1">
                <h3 className="h4 nowrap caps mb0">{track ? track.user.username : ''}</h3>
                <h2 className="h0 nowrap caps m0">{track ? track.title : ''}</h2>
            </div>
            <div className="flex flex-center px2 relative z1">
                <PlayButton
                className="flex-none h2 mr2 button button-transparent button-grow rounded"
                {...props} />
                <VolumeControl
                className='mr2 flex flex-center'
                buttonClassName="flex-none h2 button button-transparent button-grow rounded"
                rangeClassName="custom-track-bg"
                {...props} />
                <Progress
                className="flex-auto bg-darken-3 rounded"
                innerClassName="rounded-left bg-white"
                value={(currentTime / duration) * 100 || 0}
                {...props} />
        </div>
    </div>
    )
});

它应该看起来像此页面上的 BackgroundSoundPlayer.js 示例，但事实并非如此。

标签： javascriptreactjsgatsby