背景图片在React中无法正常工作

Question

我是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="button1" to="Form"> + </Link>
        </div>
       )
    }
 }

- komal deep singh chahal

---

当你在JSX中使用花括号时，需要将其用引号括起来，因为你处于JS上下文中，所以你实际上是在尝试调用一个名为url的函数，而该函数并不存在。请注意不改变原意，让翻译更通俗易懂。 - ZekeDroid

你能否通过实际操作来展示一下？ - komal deep singh chahal

Answer 1

CSS值始终是字符串。将backgroundImage的值用引号括起来以使其成为字符串：

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

- Ross Allen

---

@TheViralGriffin，您能否为您遇到的问题打开一个新的问题，并粘贴您正在使用的代码？ - Ross Allen

我遇到的问题只是一个小错误，已经解决了，谢谢。 - TheViralGriffin

Answer 2

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

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

关键在于添加 require

- λraulain

---

谢谢。我必须在这里指出，尽管我尝试了很多事情，但这个方法起作用了。+1 - Constantine Black

另外，ES6的import语句也可以使用。 - Neeraj Sewani

Answer 3

在我的情况下，我有一个带空格的网址，所以它需要用引号包起来，例如：'url'，因为我直接从服务器获取了网址（imagePath）。

'在我的情况下，我有一个带空格的网址，所以它需要用引号包起来，例如：'url'，因为我直接从服务器获取了网址（imagePath）。

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

希望这能帮到某人。

- Wachid

---

它救了我的一天！谢谢你！` ' "真的很令人困惑。 - damingzi

• 这对括号内的引用非常重要。谢谢！

- Indranil Dutta

Answer 4

在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文件夹内，因为如果使用 create-react-app ，则不支持从src文件夹外进行相对导入。

- Neeraj Sewani

---

你的解决方案使我从一个卡了两天的问题中获得了自由！ - mathguy

Answer 5

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

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

希望这可以帮助某些人：)

- mdmb

Answer 6

我不确定为什么，但对我而言，唯一有效的方法是这样的：

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

没有使用 .default，不会产生错误，但图像将不会在HTML中显示。希望我能帮到人们；）

- Saulo Felipe

---

嗨，Saulo Felipe。你需要使用.default的原因是因为require()导入了CommonJS模块，而你的文件/图像加载器（可能是webpack插件）将图像公开为ESM样式的默认导出。这仅适用于本地加载的图像，而不是像这个问题中从外部URL加载的图像。希望这对那些遇到这个问题的人还是有用的。 - Moritz Mahringer

Answer 7

今天早上我也遇到了这个问题，但是我使用下面的代码片段修复了它。

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

- Yusuf Adeyemo

---

我很高兴它有所帮助。干杯！ - Yusuf Adeyemo