javascript - 在Jsx中将backgroundImage设置为没有相对路径的样式

Question

我下面的代码不起作用，不知道为什么我不能只使用 ../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)}}>
    )
  }
}

Answer 1

在提供带有内联样式的背景图像时，请在引号内提供

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})`}}>