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

のようなテンプレートリテラルを利用して、インラインスタイルで background imageを提供しながら、