Backgroundimage没有反应 [英] Backgroundimage is not working in react

问题描述

我是新手，想要通过内联样式来获取背景图片。但它不起作用。

显示错误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 =button1to =Form> +< / Link> 
< / div> 
）
} 
} 
  

解决方案

CSS值始终是字符串。使用引号将 backgroundImage 值包装成一个字符串：

  < div className =phase1style = {{backgroundImage：url（'https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300'）}}> 
  

I am new to react and trying to get background image with inline styling. But it's not working.

Showing error "url is not defined"

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

解决方案

CSS values are always strings. Wrap the backgroundImage value in quotation marks to make it a string:

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

这篇关于Backgroundimage没有反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！