2016-08-05 7 views
3

Я новый, чтобы реагировать и пытаться получить фоновое изображение с встроенным стилем. Но это не работает.Backgroundimage не работает в реакции

Показаны ошибки "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> 
     ) 
    } 
} 
+3

это в кавычках, вы находитесь в контексте JS, когда вы помещаете curlies в JSX, чтобы вы буквально пытались вызвать функцию под названием «url», которая не существует – ZekeDroid

+0

вы можете показать, делая –

ответ

2

значения CSS всегда строки. Итоговое значение backgroundImage в кавычки, чтобы сделать его строку:

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

Столкнувшись с подобной проблемой, и это сделал трюк для меня

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

трюк добавлял обертку require