背景图像在反应中不起作用

Question

我不熟悉反应并尝试使用内联样式获取背景图像。但它不起作用。

显示错误"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>
       )
    }
 }

Answer 1

CSS 值始终是字符串。将 backgroundImage 值用引号引起来，使其成为一个字符串：

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

Answer 2

遇到了类似的问题，这对我有用

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

诀窍是添加 require

Answer 3

我今天偶然发现了这个话题。我需要动态更改 backgroundImage 属性，所以 require 不是一个选项。在我的 ElectronJS 应用程序中，我所做的是：

const imageFilePath = './some/dynamic/path/here';
const style = { backgroundImage: `url('file://${imageFilePath}')` };

希望这对某人有所帮助:)

Answer 4

今天早上我也遇到了同样的问题，但我能够用下面的代码片段修复它。

<div
    className="col-md-4 col-xs-12"
    style={{
      backgroundImage: `url(${require('./path/img.png')})`,
      backgroundPosition: 'center',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
    }}
></div>

Answer 5

在 React 中为这样的图像设置相对路径

<div className="container-login100" style={{ backgroundImage: "url('./folder/images/bg-01.jpg')" }}>

似乎无法正常工作 JSX，您需要导入图像或需要它

import BackgroundImage from './../frontend_authentication_copied/images/bg-01.jpg'

...

styles = {
        backgroundImage: `url(${BackgroundImage})`
    }

...

<div className="container-login100" style={this.styles}>

请确保将所有图像都放入 src 文件夹中，因为 相对导入 在 之外不受支持]src 文件夹，如果使用 create-react-app。

Answer 6

在我的例子中，我有 url 和 space，所以它需要用引号括起来 ex: 'url'，因为我有 url (imagePath) 直接来自服务器。

<div style={{ backgroundImage: `url('${imagePath}')` }} />

希望这对某人有所帮助。

Answer 7

我不确定为什么，但对我来说只有一种方法是这样的：

<div style={{backgroundImage: `url(${require("./images/your_image").default})`}}></div>

没有 .default 就不会出现错误，但图像根本不会出现在 html 中。我希望我帮助了别人 ;)

背景图像在反应中不起作用

Backgroundimage is not working in react

html

css

reactjs

reactcsstransitiongroup

react-native