Reactjs - ブートストラップのジャンボトロンで背景画像を設定できません

Question

画像が表示されず、構文や画像へのパスに問題があるかどうかわかりません。

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; 

「ジャンボ」コンポーネントは「コンポーネント」ディレクトリにあります。 'twin.jpg'は 'images'ディレクトリにあります。以下のスクリーンショットをご覧ください。

Answer 1

それは最も可能性の高いパスの問題が - 反応コードが正しく見えます。私はあなたのプロジェクトがどのように設定されているのか分かりませんが、通常は画像資産はpublicディレクトリに入れられます。恐らくpublic/images。次に、あなたのWebサーバのルートディレクトリからそれらにアクセスし、パスは、おそらく次のようになります。

url(/images/twin.jpg)

まず、パブリックフォルダ内の画像を入れてみてくださいし、ブラウザのURLから直接アクセスしてみてください。

Answer 2

プロジェクトをビルドするためにwebpackする必要があります。イメージをインポートすると、そのイメージのwwwまたはパブリックフォルダが作成されます。