javascript - 在Jsx中将背景图像设置为没有相对路径的样式

我下面的代码不起作用，不确定为什么我不能只使用../images/login-bg.png而是必须将其导入。

import loginBg from '../images/login-bg.png';

class MyComponent extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div style={{backgroundImage: url(loginBg)}}>
    )
  }
}

最佳答案

在为background image提供内联样式时，请在诸如

import loginBg from '../images/login-bg.png';

class MyComponent extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div style={{backgroundImage: "url(" + loginBg + ")"}}></div>
    )
  }
}

或利用模板文字

<div style={{backgroundImage: `url(${loginBg})`}}>