web-dev-qa-db-ja.com

反応コンポーネントの背景画像

ページを作成していて、material-ui要素にbackground-image CSSプロパティを使用して背景画像を設定します。もちろんそれをググってみました、そして解決策はありますが、何らかの理由でその画像を見ることができません。

追伸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>
        )
    }
}
javascripthtmlcssreactjsmaterial-ui
9
Roman

私は私のケースの修正を見つけました。実際にコンテナの高さをピクセル単位で設定すると役立ちます。

コードは次のとおりです。

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>
        )
    }
}
5
Roman

相対パスを使用して、次のように画像をインポートする必要があります。

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>
        )
    }
}
16
Romain Le Qllc

Material UIでの作業中に同じ問題があったReactおよびCreate React App。これは私のために働いた解決策です。私はWebpackをセットアップしたことに注意してください相対パスのエイリアス

import BackgroundHeader from "assets/img/BlueDiamondBg.png"

const BackgroundHead = {
  backgroundImage: 'url('+ BackgroundHeader+')'
  }

<div style={BackgroundHead}>
2
Meir Snyder

Romainwnが言ったように、画像をファイルにインポートする必要があります。親への相対パスを使用していることを確認してください。

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

行う

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

これを行うもう1つのハックは、コンポーネントにインラインスタイルタグを追加することです。

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>
        )
    }
}
2
Eugene R. Wang

これをmaterial-uiで機能させるために、親要素のパディングが24pxだったので、背景画像の幅に48pxを追加して機能させました...

const styles = {
   heroContainer: {
     height: 800,
     backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     width: `calc(100vw + 48px)`,
     margin: -24,
     padding: 24,
   }
  };
<Grid
    container
    direction="column"
    justify="flex-end"
    alignItems="right"
    style={styles.heroContainer} >
    <Grid item>Goes here</Grid>
</Grid>
1
Meli