設置backgroundImage風格沒有相對路徑在Jsx

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

同時提供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})`}}>