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

【问题标题】：Backgroundimage is not working in react背景图像在反应中不起作用
【发布时间】：2016-12-12 03:45:48
【问题描述】：

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

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

【问题讨论】：

用引号括起来，当你在 JSX 中放置花括号时，你处于 JS 上下文中，所以你实际上是在尝试调用一个名为 url 的函数，但它并不存在
你能通过如何做来展示

标签： html css reactjs react-native reactcsstransitiongroup

【解决方案1】：

CSS 值总是字符串。将backgroundImage 值用引号括起来，使其成为字符串：

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

【讨论】：

@TheViralGriffin 您能否针对您遇到的问题打开一个新问题并粘贴您正在使用的代码？
我面临的问题是轻微的输入错误。已修复，谢谢。

【解决方案2】：

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

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

诀窍是添加require

【讨论】：

谢谢。我必须在这里指出，虽然我尝试了很多东西，但这在这里奏效了。 +1
或者，也可以使用 ES6 import 语句。

【解决方案3】：

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

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

希望这对某人有所帮助。

【讨论】：

它拯救了我的一天！谢谢！ ` ' " 太令人困惑了?

【解决方案4】：

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

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

希望这对某人有帮助:)

【讨论】：

【解决方案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 文件夹中，因为如果 @987654323，src 文件夹外部不支持 相对导入 @ 用来。

【讨论】：

您的解决方案让我摆脱了困扰 2 天的问题！

【解决方案6】：

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

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

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

【讨论】：

嗨，Saulo Felipe。您需要 .default 的原因是因为 require() 导入 CommonJS 模块，并且您的文件/图像加载器（可能是 webpack 插件）将图像暴露为 ESM 样式的默认导出。这仅适用于本地加载的图像，而不适用于本问题中的外部 URL。希望它对遇到这个问题的人仍然有用。

【解决方案7】：

今天早上我正在与同样的问题作斗争，但我能够用下面的 sn-p 解决它。

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

【讨论】：

我很高兴它有帮助。干杯！