Backgroundimage在反应中不起作用

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

显示错误 “网址没有定义”

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> 
     ) 
    } 
}

来源

2016-08-05 komal deep singh chahal

包它在引号中，当你在JSX中添加curlies时，你在JS上下文中，所以你实际上试图调用一个名为'url'的函数，它不存在 – ZekeDroid

你可以通过做什么来显示 –

CSS值始终为字符串。裹在引号中backgroundImage价值，使之成为字符串：

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

来源

2016-08-05 16:55:50

面临着类似的问题，这并获得成功，我

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

的伎俩被添加require

来源

2017-11-11 12:35:34 Kraulain

Backgroundimage在反应中不起作用

回答

相关问题