Reactjs - 無法在Bootstrap的Jumbotron上設置背景圖像

圖像未顯示，我不確定它是否與語法或圖像路徑錯誤有關。Reactjs - 無法在Bootstrap的Jumbotron上設置背景圖像

import React, { Component } from 'react'; 
import { Jumbotron, Button } from 'react-bootstrap'; 
import { Link } from 'react-router-dom' 


class Jumbo extends Component { 
    render() { 
    function myFunction() { 
     console.log('test'); 
    } 

    return (
     <Jumbotron style={styles.container}> 
     <h1>{this.props.title}</h1> 
     <p>In a town like Twin Peaks no one is innocent</p> 
     <Button 
      bsStyle="primary" 
      onClick={myFunction} 
     > 
      Learn more 
     </Button> 
     <Button 
      bsStyle="primary" 
     > 
      <Link to='/contact'>Contact</Link> 
     </Button> 
     </Jumbotron> 
    ); 
    } 
} 

const bgImage = '../images/twin.jpg'; 

const styles = { 
    container: { 
    backgroundImage: `url(${bgImage})` 
    } 
}; 
export default Jumbo;

'Jumbo'組件位於'Components'目錄中。 'twin.jpg'位於'images'目錄中。請參閱下面的屏幕截圖。