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)}/>
<Link className="button1" to="Form"> + </Link>
</div>
)
}
}
答
CSS值始终为字符串。裹在引号中backgroundImage
价值,使之成为字符串:
<div className="phase1" style ={ { backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')" } }>
答
面临着类似的问题,这并获得成功,我
style={{backgroundImage: 'url(' + require('./images/sword.png') + ')'}}
的伎俩被添加require
包它在引号中,当你在JSX中添加curlies时,你在JS上下文中,所以你实际上试图调用一个名为'url'的函数,它不存在 – ZekeDroid
你可以通过做什么来显示 –