Backgroundimage没有反应

本文介绍了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 =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没有反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！