17

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

显示错误“未定义 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>
       )
    }
 }
4

7 回答 7

29

CSS 值始终是字符串。将backgroundImage值括在引号中以使其成为字符串：

<div className="phase1" style ={ { backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')" } }>
于 2016-08-05T16:55:50.700 回答
25

面临类似的问题，这对我有用

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

诀窍是添加require

于 2017-11-11T12:35:34.937 回答
11

就我而言，我的 url 上面有空格，所以它需要用引号 ex: 'url' 包裹，因为我直接从服务器获取 url (imagePath)。

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

希望这可以帮助某人。

于 2020-02-26T12:02:44.850 回答
5

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

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

希望这可以帮助某人:)

于 2018-08-09T12:20:56.997 回答
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

于 2019-09-27T07:01:08.433 回答
3

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

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

没有.default错误会发生，但图像根本不会出现在 html 中。我希望我帮助了某人；）

于 2021-06-23T02:52:39.397 回答
2

今天早上我正在与同样的问题作斗争，但我能够用下面的代码片段修复它。

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