背景图像在反应中不起作用

Question

我是新来的反应并尝试使用内联样式获取背景图像。但它不起作用。

显示错误“未定义 url”

   render() {
    return (
        <div className="phase1"
             style ={ { backgroundImage: url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300') } }>

            <input id="search"
                   type="text"
                   placeholder={this.state.search}
                   onChange={this.updateSearch.bind(this)}/>
            &nbsp; &nbsp;&nbsp; &nbsp;

            <Link className="button1" to="Form"> + </Link>
        </div>
       )
    }
 }

原文由 komal deep singh chahal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 值始终是字符串。将 backgroundImage 值用引号括起来，使其成为字符串：

 <div className="phase1" style ={ { backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')" } }>

原文由 Ross Allen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

遇到了类似的问题，这对我有用

style={{backgroundImage: 'url(' + require('./images/sword.png') + ')'}}

诀窍是添加 require

原文由 λraulain 发布，翻译遵循 CC BY-SA 3.0 许可协议