反応成分の背景画像

Question

私はページを構築しています。私は、背景画像を持つ背景画像をCSSの「背景画像」にしたいと考えています。私はもちろんそのためにgoogledして、解決策があるが、何らかの理由で私はそのイメージを見ることができません。

P.S.1：MUI要素を通常に変更しても、まったく役に立たなかった。

P.S.2：私が内部のコンテナを使用しているとき、それは私が望むものではありません。

UPDATE1：あなたは、相対パスを使用して、以下のように画像をインポートする必要が...まだ、コンテナに

import React from 'react'; 

import Paper from 'material-ui/Paper'; 

import IconButton from 'material-ui/IconButton'; 
import ActionHome from 'material-ui/svg-icons/action/home'; 


const styles = { 
    paperContainer: { 
     backgroundImage: `url(${"static/src/img/main.jpg"})` 
    } 
}; 

export default class Home extends React.Component{ 
    render(){ 
     return(
      <Paper style={styles.paperContainer}> 

      </Paper> 
     ) 
    } 
} 

Answer 1

私のケースの修正が見つかりました。実際、ピクセル単位でコンテナの高さを設定することが助けになりました。 Romainwnが言ったように、あなたはファイルにイメージをインポートする必要が

import React from 'react'; 


const styles = { 
    paperContainer: { 
     height: 1356, 
     backgroundImage: `url(${"static/src/img/main.jpg"})` 
    } 
}; 

export default class Home extends React.Component { 
    render() { 
     return (
      <div style={styles.paperContainer}> 
      </div> 
     ) 
    } 
} 

Answer 2

を運を高さと幅を添加しないしようとしました。

import React from 'react'; 

import Paper from 'material-ui/Paper'; 

import IconButton from 'material-ui/IconButton'; 
import ActionHome from 'material-ui/svg-icons/action/home'; 

import Image from '../img/main.jpg'; // Import using relative path 


const styles = { 
    paperContainer: { 
     backgroundImage: `url(${Image})` 
    } 
}; 

export default class Home extends React.Component{ 
    render(){ 
     return(
      <Paper style={styles.paperContainer}> 
       Some text to fill the Paper Component 
      </Paper> 
     ) 
    } 
} 

Answer 3

：

は、ここでは、コードです。あなたが親への相対パスを使用していることを確認し、その代わりに

static/src/img/main.jpg #looks for static folder from current file location 

のそれを行う別のハックは、コンポーネントにインラインスタイルタグを追加することになる

/static/src/img/main.jpg #looks for file from host directory: 

を行います

import React from 'react'; 

import Paper from 'material-ui/Paper'; 

import IconButton from 'material-ui/IconButton'; 
import ActionHome from 'material-ui/svg-icons/action/home'; 

import Image from '../img/main.jpg'; // Import using relative path 


export default class Home extends React.Component{ 
    render(){ 
     return(
      <Paper style="background:path/to/your/image;"> 

      </Paper> 
     ) 
    } 
}